6.8 CSS 外边距(margin)

用来和其他元素隔开

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


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

What is techbrood 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)