CSS深入理解之margin外边距

1、margin的相关属性
margin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。没有继承性，也就是它的设置的margin值不会自动传递到下一级标签中。
margin后面的参数个数可以是一个，两个，三个或四个。
一个参数，例如：margin:10px;表示四边外边距10像素；
两个参数，例如：margin:10px 5px;表示上下外边距10像素，左右外边距5像素；
三个参数，例如：margin:10px 5px 2px;表示上外边距10像素，左右边距5像素，下边距2像素；
四个参数，例如：margin:10px 5px 2px 1px;表示上外边距10像素，右外边距5像素，下外边距2像素，左外边距1像素。

可能的值

值	说明
auto	设置浏览器边距。 这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

2、margin常见问题

2.1、IE6下双边距问题

margin双布局可以说是IE6下经典的bug之一。产生的条件是：block元素+浮动+margin。

出现问题：

.container{
   margin:20px;
   float:left;
   background-color:red;
}

这里提一下解决方法，使用hack我是不推荐的，使用hack属于比初学者稍高一点的层次水平。一个页面，没有一个hack，但是各个浏览器下表现一致，这才是水平。使用display:inline;可以解决这个问题。
而为什么display:inline可以解决这个双边距bug，首先是inline元素或inline-block元素是不存在双边距问题的。然后，float:left等浮动属性可以让inline元素haslayout，会让inline元素表现得跟inline-block元素的特性一样，支持高宽，垂直margin和padding等，所以div class的所有样式可以用在这个display inline的元素上。
解决问题（加上display:inline）： 

.container{
   margin:20px;
   float:left;
   background-color:red;
   display:inline;
}

解决问题（去掉float） 

.container{
   margin:20px;
   background-color:red;
}

2.2、margin重叠的问题

css 2.0规范对margin重叠有如下的描述：
i.水平边距永远不会重合。
ii.垂直边距可能在特定的框之间重合：
* 常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。
* 在一个浮动框和其它框之间的垂直边距不重合。//这句话是不够严谨，在IE浏览器下确实如此，但是Firefox等浏览器下依旧重合。
* “绝对定位的框”与“相对定位的框”边距不重合。//这句话有待斟酌，我在Firefox等浏览器下测试，效果貌似很糟糕的。

margin重叠的问题其实并不是经常遇到，有时即使遇到造成的影响也很小，或是通过其他一些修改就可以轻松解决这个问题了。当重叠较多时，没有找到什么好的方法解决这个问题，要不IE浏览器依旧顽固不化，要么Firefox表现差强人意。最好的解决margin重叠问题的方法就是了解它，避免它。

每枚硬币都有正反面，其实margin重叠也是有它的用处的。当垂直方向上有多个模块时，margin重叠正好可以让上中下都有一个margin值，而且由于margin重叠，所以margin值的表现都是一样的。例如a,b,c三个垂直方向上的模块都有margin:10px 0; 则最后的表现结果是（如果其上下没有浮动元素干扰的话）：上，中上，中下，下四处有10像素的间距。正好完美定位。

2.3、margin不起作用的情况

margin不起作用多出现在Firefox浏览器下，最常见的原因就是浮动影响，还有就是margin重叠，或者是padding与margin的重叠。因为margin不起作用，可以使用padding代替，或者再添加一层标签等方法解决。

3、margin负值的相关应用

图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了，我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:0 3px -3px 0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。