css padding属性

2018年04月10日 10:37 | 2426次浏览 作者原创 版权保护

我们从盒子模式那一页看到,留白 (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   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程