6.8 CSS 外边距（margin）

padding用来在元素内容和自身边界之间添加空白，margin则用来在元素和元素之间添加空白。两者的语法类似。

<p style="margin:0; margin-left: 40px;">What is xnip for?</p>
<p style="margin: 40px;">A dedicated search engine on web programming resources.</p>

What is xnip for?

A dedicated search engine on web programming resources.

上面第1个p元素的下面添加了20px的间隔，而第2个p元素四周都添加了40px的间隔。

垂直外边距的合并

如果你会使用浏览器检查工具的话（按F12打开），你可能会观察到，上例中的两个p元素之间的间隔并非（20+40）=60px，而是40px。 为什么呢？这是因为元素之间相邻的垂直外边距并不会简单的相加，而会被自动合并成最大值。

虽然看起来有点奇怪，其隐含的语义是：元素外边距表示的是该元素想离开其他元素的最小间隔（minimum space）。

“好吧，我希望下一排元素兄弟的座位离我至少20px，如果更大当然好，但是请至少保持20px啊！”

内外边距的选择

如果元素有边线和背景，那么内外边距是显然不同的；反之，内外边距所达到的隔离视觉效果是相同的。 这个时候我们需要从语义或设计用意上来考虑如何选择，如果我们希望内容有更多空间，就选择padding，如果希望元素本身有更多空间，则选择margin。

此外，还要考虑外边距的合并效应（merge）。