margin是css中用来设置外边距的属性,使用时需要注意以下几种情况:
一、margin的塌陷现象
标准文档流中,竖直方向的margin不叠加,以较大的为准。
如果不在标准流,比如盒子都浮动了,那么两个盒子之间是没有塌陷现象的:
二、 盒子居中margin:0 auto;
margin的值可以为auto,表示自动。当left是auto的时候,盒子靠右墙,当right是auto的时候,盒子靠左墙;当left、right两个方向,都是auto的时候,盒子居中了:
margin-left: auto;
margin-right: auto;
简写为:
margin:0 auto;
- 注意:
1) 使用margin:0 auto; 的盒子,必须有width,有明确的width
2) 只有标准流的盒子,才能使用margin:0 auto; 居中。
也就是说,当一个盒子浮动了、绝对定位了、固定定位了,都不能使用margin:0 auto;
3) margin:0 auto;是让盒子本身居中,而不是让文本居中。
文本的居中,要使用 text-align:center;
三、善于使用父亲的padding,而不是儿子的margin
如果父亲没有border,那么儿子的margin-top 实际上踹的是“流”,踹的是这“行”。父亲也会跟着掉下来。
所以,margin这个属性,本质上描述的是兄弟和兄弟之间的距离; 最好不要用这个marign表达父子之间的距离。
四、关于margin的IE6兼容问题
1.IE6双倍margin bug
当出现连续浮动的元素,携带和浮动方向相同的margin时,队首的元素,会双倍marign。
解决办法:
1)使浮动的方向和margin的方向相反。
2)单独给队首的元素,写一个一半的margin。ul li.no1{_margin-left:20px;
2.IE6的3px bug
解决办法:
因为根本就不允许用儿子使用margin踹父,所以,如果你出现了3px bug,说明你的代码不标准,要用父亲的padding。