本文节选自《CSS设计指南(第3版》。
第1章完全免费试读,电子书在线热卖中:http://www.ituring.com.cn/book/1111

以下内容节选自第3章。

垂直方向上的外边距会叠加,这可是你必须得知道的一件事。本节就来解释一下什么叫外边距叠加,为什么它那么重要。假设有3个段落,前后相接,而且都应用以下规则:

/*为简明起见,省略了字体声明*/
p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; margin-bottom:30px;} 

由于第一段的下外边距与第二段的上外边距相邻,你自然会认为它们之间的外边距是80像素(50+30),但是你错啦!它们实际的间距是50像素。像这样上下外边距相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。就上面的例子而言,第二段较宽的上外边距会碰到第一段的边框。也就是说,较宽的外边距决定两个元素最终离多远,没错——50像素(参见图3-7)。这个过程就叫外边距叠加。

enter image description here

注意啦,叠加的只是垂直外边距,水平外边距不叠加。对于水平相邻的元素,它们的水平间距是相邻外边距之和。这跟你最初想的一样。

好吧,我想必须得解释一下为什么要让外边距叠加。如果有一连串段落都被应用了相同的样式,那么对其中第一段和最后一段来说,它们的上外边距和下外边距决定了它们与包含元素的间距。而那些位于中间的段落呢,根本不需要两个外边距加起来那么宽的间距。因此,就像图3-7所示的那样,相邻的外边距叠加起来是最合理的,哪个外边距宽,就以哪个外边距作为段间距。