一起CSS

当前位置:一起CSS > CSS > 文章正文

margin叠加原理

日期:2009-05-11 分类:CSS

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

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

margin叠加

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

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

margin叠加

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

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

margin叠加

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

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

margin叠加

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

 

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

margin叠加

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

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

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

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

查看:1,338 评论:2 标签:,

随机日志

共有 2 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved