由于margin在浏览器中的BUG很多,有人强烈推荐尽量不要使用margin,而用padding!我很奇怪,我们在Tian开发的时候,虽然他们很多时候可以随便用什么,但是很多时候我们不得不用margin。绝大多数的margin引起的BUG是可以解决。
今天有人问我一个margin叠加的问题。有些人喜欢把margin叠加归纳到BUG中去,有些却不这么认为,他们的理由是Firefox也有这个问题,所以不能叫bug。呵呵好像有点牵强。其实大家只要看看,w3c认为margin叠加是合理的。不管是不是bug,但是这个问题真的存在。看下面这个例子:
[code=”html”]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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" "https://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。这里就不说了。
在叠加元素加空块状元素,我试了不成功。
是这样加吗?
回复麻烦回到我邮箱,谢谢^_^
居然屏蔽了我的html代码=.=
我直接在两个content之间加空的div,不成功
无标题文档
*{ 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;
直接在两个content之间加空的div3 样式 .div3{ display:inline-block; line-height:0;} 。在几个浏览器试了下 ,这样貌似解决了两个content还存在叠加的情况。