前面介绍了边框，一个元素除了边框这种能看见的，它还有两个看不见的空间，就是外边距（margin）和填充（padding）。

为方便起见，以下直接使用 margin 和 padding 叙述。

margin 定义元素与外部元素之间的间距，而 padding 定义的，是元素自身边框与元素内容之间的间距。

咱们看一张图就清楚了。

在最中间的内容块，它外面的浅蓝区域是 padding，注意看到它是内容与实线边框之间的区域。

而实线边框与最外层的虚线框之间的区域，则是 margin。

虚线框之外的地方，就是其它元素占据的区域。

这张图里，放置了内容块上右下左各一个元素区域，结合昨天介绍的边框的内容，是不是很熟悉？

外边距（margin）

margin 本身就是个属性，不过它和 border 一样，是个简写。

那自然，如果不简写，需要用到的属性如下：

• margin-top

• margin-right

• margin-bottom

• margin-left

如下图所示：

它们能接受的值，可以是一个固定的值，比如 1px, 1em, 1pt 等，也可以是一个百分比(%)。

简写具体代表的值，则和之前说过的上右下左顺序一样，只不过这里的简写还有几种情况。

如果是按以下方式写全了，意思自然不用说了。

.one {   margin: 1px 2px 3px 4px; } 

简写则分成以下情况。

简写为一个值

.one {   margin: 1px; } /* 上面和下面效果一样 */ .two {   margin-top: 1px;   margin-right: 1px;   margin-bottom: 1px;   margin-left: 1px; } 

简写为两个值

.one {   margin: 1px 2px; } /* 上面和下面效果一样 */ .two {   margin-top: 1px;   margin-right: 2px;   margin-bottom: 1px;   margin-left: 2px; } 

简写为三个值

.one {   margin: 1px 2px 3px; } /* 上面和下面效果一样 */ .two {   margin-top: 1px;   margin-right: 2px;   margin-bottom: 3px; } 

填充（padding）

padding 本身也个属性，它和 margin、 border 一样，是个简写。

不使用简写的时候，则有以下属性可用：

• padding-top

• padding-right

• padding-bottom

• padding-left

如下图所示：

padding 的简写方式和效果和 margin 完全一样，此外不再展开叙述。

总结

• 🍑 margin 定义元素与外部元素之间的间距，也就是 border 与外部其它元素之间的间距。

• 🍑 padding 定义元素自身边框与元素内容之间的间距。

• 🍑 margin 和 padding 本身都是简写元素，简写的顺序遵循上右下左。