Margin

Margin 的正常使用就不做过多的介绍了

看一个某商城的例子



从上图可以看到,左边是一个专题栏,右边是商品列表,可以看做一个
8 宫格的图形,每一个商品与商品之间有一定的间隙。
这里需要思考的问题:假如商品与商品之间的间隙是使用 margin-left
与 margin-bottom 实现的,那么每一排的第一个元素的 margin-left 的
位置怎么消除,最后一排的 margin-bottom 怎么消除?

看下面效果

未做处理的效果


<style type="text/css">
    .wrap{
        width:150px;
        border:1px solid #d1d1d1;
    }
    .wrap ul{
        margin:0;
        padding:0;
    }
    .wrap ul > li{
        margin-left:10px;
        margin-bottom: 10px;
        list-style: none;
        float:left;
        width:30px;
    }
</style>
<div class="wrap">
    <ul class="clearfix">
        <li>
            <img src="http://usr.im/200x60?text=1">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=2">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=3">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=4">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=5">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=6">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=7">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=8">
        </li>
    </ul>
</div>

处理后的效果


<style type="text/css">
    .wrap{
        width:150px;
        border:1px solid #d1d1d1;
    }
    .wrap ul{
        /* 让 ul 向上和向左负移动一定距离 */
        margin:-10px auto auto -10px;
        padding:0;
    }
    .wrap ul > li{
        margin-left:10px;
        margin-top: 10px;
        list-style: none;
        float:left;
        width:30px;
    }
</style>
<div class="wrap">
    <ul class="clearfix">
        <li>
            <img src="http://usr.im/200x60?text=1">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=2">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=3">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=4">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=5">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=6">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=7">
        </li>
        <li>
            <img src="http://usr.im/200x60?text=8">
        </li>
    </ul>
</div>