CSS填充(padding)——CSS实验室

我们首先来搭建实验padding的平台,一个p元素。点击下面的按钮以将这个p元素“圈出来”。

CSS顶部填充:padding-top

通过设置CSS中的padding-top属性,我们可以设置元素的顶部填充。点击下面的按钮给元素设置一个5像素的顶部填充,看看实验的p元素会有什么变化。

padding-top:5px;

CSS底部填充、左侧填充、右侧填充

与顶部填充的道理是一样的,我们同样可以通过CSS的padding-bottom、padding-left、padding-right属性分别设置底部、左侧、右侧填充。可以点击下面的三个按钮实验一下。

padding-bottom:5px;

padding-left:5px;

padding-right:5px;

CSS填充:padding

与前面的缩略属性类似,我们可以一次指定所有方向的填充。只需要设置一个padding属性即可。点击下面的按钮给我们的实验p设置10像素的填充。

在设置padding属性的时候,我们会发现段落文字距离边框的距离被“撑远了”,这就是padding属性的作用。


返回:CSS实验室 CSS入门 首页