css中的margin、padding、border详解

CSS 中有个重要的概念，就是盒子模式 (Box model)。

先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。



盒子里由外至里依次是：

1、margin 边距

2、border 边框

3、padding 间隙 (也有人称做补丁)

4、content (内容，比如文本，图片等)

CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

CSS 边框属性 (border) 用来设定一个元素的边线。

CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。

CSS 背景属性指的是 content 和 padding 区域。

CSS 属性中的 width 和 height 指的是 content 区域的宽和高。



W3C 组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content， border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。



1、margin：层的边框以外留的空白

2、background-color：背景颜色

3、background-image：背景图片

4、padding：层的边框到层的内容之间的空白

5、border：边框

6、content：内容

边框(border)边距(margin)和间隙(padding)属性的区别

　　边框属性(border)用来设定一个元素的边线。

　　边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

　　间隙属性(padding)是用来设置元素内容到元素边界的距离。

　　这三个属性都属于CSS中box类型的属性。

　　


　　本文转自“faintling的专栏”：css中的 margin | padding | border 属性图释