margin的相关属性及应用

1、margin常见问题:

①IE6下双边距   (不推荐使用float+margin,可用padding替代)

详见《css浏览器兼容问题集锦》之4、IE6中margin双边距

②IE6绝对定位margin-left的问题   (不推荐使用absolute布局)

详见《css浏览器兼容问题集锦》之3、IE6中绝对定位left的div,与其他div的margin-left问题

2、在流动性布局当中的应用

详见《网页布局的应用(float或absolute)》 (不推荐使用absolute布局)

3、在选项卡等边线的处理

.nav li { float: left; padding: 5px 20px; border: 1px solid #dcdcdc; margin-right: -1px; }
.nav li.hover { border-bottom: none; }
<div class="fz">
    <ul class="nav">
        <li>首页</li>
        <li class="hover">技术</li>
        <li>生活</li>
        <li>作品</li>
    </ul>
</div>

或者margin-left:-1px;让之间的边框重叠。上下排列使用margin-top或者margin-bottom。

4、图片与文字对齐

当图片较小16或者20像素的时候设置img的属性
vertical-align:middle;
vertical-align:text-bottom; 
margin:0 3px -3px 0;
总结:具体根据实际情况
posted @ 2015-01-14 14:50  psycho_z  阅读(162)  评论(0编辑  收藏  举报