[css] 认识margin

原文链接http://www.zhangxinxu.com/wordpress/2009/08/css-margin%E7%9A%84%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7%EF%BC%8C%E9%97%AE%E9%A2%98%E5%8F%8A%E5%BA%94%E7%94%A8/

1、ie6下margin双边距问题

产生问题条件：margin + folat + block

解决问题的办法： inline 并 去掉float

为什么能解决 ：

本身inline元素是不支持宽高及垂直paddign、margin的，但是有了float可以让inline haslayout,所以让inline元素支持宽高及垂直padding、margin。

2、margin 重叠问题

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

解决办法

http://www.zhangxinxu.com/study/200908/margin-overlap.html

3、margin负值的相关应用

图片与文字对齐问题

图片和文字默认是底部对齐，

解决方法一：vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。

方法二：如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:0 3px -3px 0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。