我们首先来搭建实验padding的平台,一个p元素。点击下面的按钮以将这个p元素“圈出来”。
通过设置CSS中的padding-top属性,我们可以设置元素的顶部填充。点击下面的按钮给元素设置一个5像素的顶部填充,看看实验的p元素会有什么变化。
padding-top:5px;
与顶部填充的道理是一样的,我们同样可以通过CSS的padding-bottom、padding-left、padding-right属性分别设置底部、左侧、右侧填充。可以点击下面的三个按钮实验一下。
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
与前面的缩略属性类似,我们可以一次指定所有方向的填充。只需要设置一个padding属性即可。点击下面的按钮给我们的实验p设置10像素的填充。
在设置padding属性的时候,我们会发现段落文字距离边框的距离被“撑远了”,这就是padding属性的作用。