margin叠加的问题

由于margin在浏览器中的BUG很多,有人强烈推荐尽量不要使用margin,而用padding!我很奇怪,我们在前端开发的时候,虽然他们很多时候可以随便用什么,但是很多时候我们不得不用margin。绝大多数的margin引起的BUG是可以解决。
今天有人问我一个margin叠加的问题。有些人喜欢把margin叠加归纳到BUG中去,有些却不这么认为,他们的理由是Firefox也有这个问题,所以不能叫bug。呵呵好像有点牵强。其实大家只要看看w3c的文档w3c认为margin叠加是合理的。不管是不是bug,但是这个问题真的存在。看下面这个例子:

[code=”html”]

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




margin: 20px auto
margin: 20px auto
margin: 20px auto
margin: 20px auto
margin: 50px auto



[/code]

解决这个问题的方法有不少,先来看看这个,在外层的容器中加:overflow:hidden;zoom:1;
[code=”html”]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




这里两个还是存在叠加margin: 20px auto
这里两个还是存在叠加margin: 20px auto
margin: 20px auto
margin: 20px auto
margin: 50px auto


[/code]

还有外层的容器中加边框属性,在叠加元素加空块状元素等等。。还有就是用padding来取代margin。这里就不说了。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » margin叠加的问题

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    在叠加元素加空块状元素,我试了不成功。
    是这样加吗?

    回复麻烦回到我邮箱,谢谢^_^

    船长9年前 (2009-10-23)回复
  2. #-48

    居然屏蔽了我的html代码=.=
    我直接在两个content之间加空的div,不成功

    船长9年前 (2009-10-23)回复
  3. #-47

    无标题文档

    *{ padding:0; margin:0;}
    .div{ background:green; overflow:hidden;zoom:1}
    .div1{ background:#ccc; margin:20px auto;}
    .div2{ background:#C03; margin:50px auto;}
    .div3{ display:inline-block; line-height:0;}/*这个空层使得两个一起叠加的层,不再叠加*/

    不存在叠加margin:20px auto;

    不存在叠加 margin:20px auto;

    margin:20px auto;

    margin:20px auto;

    margin:50px auto;

    ヾ左岸の☆の8年前 (2011-08-09)回复
    • 直接在两个content之间加空的div3 样式 .div3{ display:inline-block; line-height:0;} 。在几个浏览器试了下 ,这样貌似解决了两个content还存在叠加的情况。

      ヾ左岸の☆の8年前 (2011-08-09)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏