我们从盒子模式那一页看到，留白 (padding) 是在内容外，边框内的部分。一个盒子有四个边，所以我们可以对这四个边的留白逐一设定：
1 padding-top (上)
2 padding-right (右)
3 padding-bottom (下)
4 padding-left (左)
第五个属性，padding，是用来作为同时设定四个边留白的捷径属性。
例如
设置 p 元素的 4 个内边距：
p
{ padding:2cm 4cm 3cm 4cm;
}有三种方式可以设定留白，分别为长度、百分比、以及 'auto'。我们来看以下的例子：
#container {
padding-top:15px;
padding-left:10px;
padding-right:30px;
padding-bottom:40px;
border: 1px solid 000000;
}以下的 HTML代码，
<div id="container"> 这是留白的例子。这里对了上、下、左、右的留白空间都有设定。 </div>
效果请自行新建个html页面查看
在这里上面的留白为 15px，左边的留白为 10px，右面的留白为 30px，而下面的留白为 40px。
留白捷径
所有四个边的留白可以同时由 padding 属性设定。它的语法如下：
padding: [上面留白值] [右边留白值] [下面留白值] [左边留白值]
在这里，顺序非常重要。第一个值一定是上面留白的值，第二个值一定是右边留白的值，第三个值一定是下面留白的值，而第四个值一定是左边留白的值。
此文章本站原创，地址 https://www.vxzsk.com/773.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程