border padding margin详解

内容提要：本文讲解borderpaddingmargin三者的用法及区别。

　　我们在查看或编辑网页源代码时，肯定会遇到border padding margin这三个单词，比如：padding: 14px 0; margin: 0 8px;代码所指的是什么，怎么去理解？ IT部落窝在本文就给大家详解border padding margin的区别和用法。　　在CSS中，它们都是box盒子类型的属性，用来表示距离。刚接触CSS，可能还不太容易搞清楚它们的区别，接触多了就会明白。　　首先，看下图，意思是： margin：层的边框以外留的空白，padding：层的边框到层的内容之间的空白，border：边框，content：内容。

　　边框属性(border)用来设定一个元素的边线。 　　边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。 　　间隙属性(padding)是用来设置元素内容到元素边界的距离。 　　这三个属性同属CSS中box类型的属性。 　　1、边框样式border　　语法：border : border-width || border-style || border-color 　　参数： 该属性是复合属性。请参阅各参数对应的属性。 　　默认值为：medium none。border-color的默认值将采用文本颜色。 要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。 　　例如： p { border: thick double yellow; }

　　2、空白Padding，语法： padding : length 　　参数：length :由浮点数字和单位标识符组成的长度值或者百分数。百分数是基于父对象的宽度。请参阅长度单位。　　Padding 缩写介绍：　　检索或设置对象四边的补丁边距。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。　　例如：p { padding: 36pt 24pt 36pt; }　　3、边距Margin，语法：margin : auto | length　　参数：　　auto:值被设置为相对边的值　　length :由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。　　margin 缩写介绍：　　如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。　　Margin的外边距属性有：margin-top—上边距，margin-right—右边距，margin-bottom—下边距，margin-left—左边距。　　举例如下： 　　body { margin: 36pt 24pt 36pt; } 　　body { margin: 11.5%; } 　　body { margin: 10% 10% 10% 10%; }

声明：本站所涉及提供的素材内容来源于互联网，供下载交流学习使用，请勿进行商业用途。如果本站提供的素材有任何侵权行为，请告知我们，站长会及时处理。Email：