margin叠加

作者: mindevil 分类: CSS 发布时间: 2010-11-24 11:23 ė 6没有评论

今天做东西在火狐中遇到了margin叠加问题,然后向ZLC请教了一下,他说也许是子元素继承了父元素……

然后教我了解决的方法:

以下就是解决的方法:

margin 叠加是什么?就是当垂直外边距相遇时,它们将叠加,叠加的高度取较大的。下面按各种情况及附图来说明。

当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,如图:

margin叠加

元素的顶边界与前面元素的底边界发生叠加。

当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,如图:

margin叠加

元素的顶边界与父元素的顶边界发生叠加。

尽管初看上去有点儿奇怪,但是边界甚至可以与本身发生叠加。假设有一个空元素,它有边界,但是没有边框或填充。在这种情况下,顶边界与底边界就碰到了一起,它们会发生叠加,如图:

margin叠加

元素的顶边界与底边界发生叠加。

如果这个边界碰到另一个元素的边界,它还会发生叠加,如图:

margin叠加

空元素中已经叠加的边界与另一个空元素的边界发生叠加。

边界叠加初看上去可能有点儿奇怪,但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有 边界叠加,后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加,段落之间的顶边界和底边界就 叠加在一起,这样各处的距离就一致了,如图:

margin叠加

边界叠加在元素之间维护了一致的距离。

margin 叠加只发生在普通文档流中块框的垂直,行内框、浮动框或绝对定位框之间的边界不会叠加。

margin 叠加虽然是合理的,但如果处理不当,会产生不期望的效果,解决的办法有以下几种:

  1. 用外元素的 pading 代替元素的 margin;
  2. 给外元素加透明边框,即:border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加;
  3. 元素绝对定位;
  4. 外元素设置 overflow:hidden;
  5. ……

本文出自 肥蕉博客@IT技术,热门话题,生活随笔,美图欣赏,转载时请注明出处及相应链接。

本文永久链接: http://www.bananawolf.com/html/2010/11/181.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

Ɣ回顶部