设置每个li的margin距离（巧设计）

           当我们在一个div里面包含头、中（ul和li）、尾i的话，如果设置每一个li的margin属性的话，那么虽然每个li都有距离了，但是整体的间距是不和谐的，这里需要设置ul的margin属性，代码如下：

<div class="contain">
        <div class="head"></div>
        <div class="main">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div class="foot"></div>
</div>

CSS样式：

     .contain
        {
            width: 78px;
            border: 1px solid red;
        }
        .contain .head
        {
            width: 78px;
            height: 12px;
            background-color: Orange;
        }
        .contain .main
        {
            width: 78px;
        }
        .contain .main ul
        {
            margin: 0;
            padding: 0; /*ff*/
            margin-bottom: 10px; /*离下面的距离*/
        }
        .contain .main ul li
        {
            width: 39px;
            height: 35px;
            margin: 0 auto;
            margin-top: 10px; /*离顶部的距离*/
            list-style-type: none;
            border: 1px solid red;
        }
        .contain .foot
        {
            width: 78px;
            height: 12px;
            background-color: Orange;
        }

转载于:https://www.cnblogs.com/dreamhouse/archive/2013/02/22/2921697.html