小虾虎鱼

小虾虎鱼

CSS外边距(margin)叠加详解

作者 禾惠 发表于 2012/09/11,最后修改于 2012/09/11

        以前一直都不知道CSS外边距会有叠加的情况,知道最近才知道有这么一个概念。以下文章是从5idev.com转载过来。

        外边距叠加是指两个垂直相邻的块级元素,当上下两个边距相遇时,起外边距会产生叠加现象,且叠加后的外边距,等于其中较大者。 图示: 


外边距上下叠加示意图


另一个叠加现象是当一个元素包含在另一个元素之中时,子元素与父元素之间也会产生叠加现象,叠加后的外边距,等于其中最大者: 


子元素与父元素外边距上下叠加示意图


同理,如果一个无内容的空元素,其自身上下边距也会产生叠加。 


外边距叠加的意义

        外边距的叠加只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段落P)时,那么块元素之间因为外边距叠加的存在,段落之间就不会产生双倍的距离。 


防止外边距叠加

        虽然外边距的叠加有其一定的意义,但有时候我们在设计上却不想让元素之间产生叠加,那么可以有如下几个建议可供参考: 

  1. 尽量使用padding来达到目的

  2. 在可能叠加的外边距之间添加透明边框或者内边距使之分隔开

  3. 给元素添加上浮动(float)属性

  4. 在可能叠加的元素间添加空的块元素

  5. 绝对定位

以上建议可根据实际情况来采取。 


本文张转自http://www.5idev.com