[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;}可以说是公式版的东西,能实现效果和兼容性俱佳的对齐效果。

posted @ 2016-08-08 10:40  王小窝  阅读(209)  评论(0编辑  收藏  举报