margin负值的妙用

1、垂直水平居中盒子的实现

        .box{            position: absolute;            top: 50%;            left: 50%;            margin-left: -200px;            margin-top: -200px;             width: 400px;            height: 400px;            background: orange;        }

2、导航部分 margin-right的问题

场景：在设置导航部分时，会用到float布局，并且每个li使用margin-right使得每个部分之间存在间隔。
但是最后一个li我们并不想让它有margin-right的值。通过css选择器也是一种选择，当然对ul使用margin-right:负值；也同样可以巧妙地解决这样的问题。

        <div class="box">            <ul>                <li>首页</li>                <li>音乐</li>                <li>相册</li>                <li>博文</li>                <li>详情</li>            </ul>        </div>        <style>            *{                margin:0;                padding: 0;            }            ul,li{                list-style: none;            }            ul:after{                content: '';                display: block;                clear: both;            }            .box{                width: 240px;                background: black;            }            ul{                margin-right: -20px;   // 关键代码            }            ul li{                float: left;                margin-right: 20px;                background: orange;            }    </style>

得到想要的效果：

2、列表中常常会用到border-bottom属性，最后一个border-bottom又会和边框重合

比如：

       <div class="box">           <ul>               <li>地月成像照稍后公布 星箭分离延迟25秒</li>               <li>火箭一级残骸坠落贵州 整流罩坠落江西</li>               <li>中国航天体制之困 NASA:何时返月不重要</li>               <li>长城现特警执勤 故宫游客超最大容量 国庆专题</li>               <li>9月人民币   创汇改最大单月涨幅</li>               <li>温家宝:中国将积极参与希腊新发行国债认购</li>               <li>俄总统梅德韦杰夫拟下月登上日俄争议岛屿</li>           </ul>       </div>      <style>        *{            margin:0;            padding: 0;        }        ul,li{            list-style: none;        }        .box{            width: 340px;            border:2px solid #D7E2EC;        }        ul li{            margin-bottom: -1px;   // 关键代码            height: 24px;            line-height: 24px;            padding: 4px;            border-bottom:1px dotted #D5D5D5;        }     </style>

得出的效果: 两个下边框重合在一起。

原文地址：点击这里