CSS学习笔记10：属性margin使用说明

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。