首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

css之margin collapse(外头距叠加)

2012-09-01 
css之margin collapse(外边距叠加)首先抛出问题:“和父元素相同大小的子元素,设置了四边的Margin的子元素却

css之margin collapse(外边距叠加)

首先抛出问题:

“和父元素相同大小的子元素,设置了四边的Margin的子元素却向右侧平移了”(源自者也:http://zheye.org/asks/4e8582effd503c260d0004d7)

stackoverfow:

    Margin on child element moves parent element

    Child elements with margins within DIVs

其实: 以上问题都源于css中的margin collapse,即外边距叠加。 以下内容源于css mastery second edition。

margin collapse发生的条件有,处于normal flow(正常文档流,而非postion: float || absolute),block元素间的垂直margin(margin-top, margin-bottom)。所以可以改变元素的定位(增加float属性或position: absolute)来取消margin collapse.

?

下面是margin collapse的几种情况:

1. 上下两div(上定义有margin-bottom, 下有margin-top): 叠加取较大的margin值


css之margin collapse(外头距叠加)
?2. margin collapse发生在父元素和子元素之间,前提是垂直边距间不存在padding(内边距)和边框。所以可以通过增加padding属性,或边框,防止叠加。如例子者也。


css之margin collapse(外头距叠加)
?3. margin collapse会发生在定义有垂直外边距的空元素,如下图


css之margin collapse(外头距叠加)
?叠加也是连续的:



css之margin collapse(外头距叠加)
以上是margin collapse发生的几种情况。

其实 margin collapse 的存在有他自身的意义:


css之margin collapse(外头距叠加)

?补充:margin边界叠加问题以及ie和Firefox的不同解释

?

?

?

热点排行