外边距叠加

  外边距叠加其实是一个非常简单的概念,不过,一开始我还是被其高大上的名字(margin-collapsing)唬得不轻~

  什么是外边距叠加呢?在normal流中,同一BFC下,相邻垂直外边距会重叠形成一个外边距,外边距高度为叠加的外边距较大者。(我是这样记住的:尽量在满足双方的margin下,使得margin尽量贴近border、padding、内容。如果元素没有border、padding、内容,塌得挺严重的~)

  外边距叠加的情况:

 1. 2个垂直相邻的元素,第一个元素的底外边距与第二个元素顶外边距重叠

2.当一个元素包含另一个元素,若这两元素之间无border,padding,则它们的垂直外边距会叠加

3.元素的顶与底边距在无内容,padding,border时也会叠加,已叠加的空元素之间也会叠加(例子:多个有margin的p元素没有高度)

  so~难道外边距叠加是一个BUG,如果是,为何不在新版本的css中剔除它呢,我认为其实很多bug不是真正意义上的bug。而是我们用的不恰当,没有深入了解css,所谓的bug不过是用错了的方法,那外边距坍塌为何出现呢?1.外边距叠加使得元素之间的距离一致  2.使得空元素不会占据过多不必要的空间  当然,第一个原因意义大些,至少,尽量减少不必要的元素节点是我们的职责~

看出来了了吗?这里插多一句,可以看出body与html元素默认是不重合的,注意:absolute定位的最外层是基于<html>的,而relative与static的最外层定位元素是<body>~

posted @ 2014-04-25 09:37  Pada  阅读(257)  评论(0编辑  收藏  举报