设置每个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
        {
            78px;
            border: 1px solid red;
        }
        .contain .head
        {
            78px;
            height: 12px;
            background-color: Orange;
        }
        .contain .main
        {
            78px;
        }
        .contain .main ul
        {
            margin: 0;
            padding: 0; /*ff*/
            margin-bottom: 10px; /*离下面的距离*/
        }
        .contain .main ul li
        {
            39px;
            height: 35px;
            margin: 0 auto;
            margin-top: 10px; /*离顶部的距离*/
            list-style-type: none;
            border: 1px solid red;
        }
        .contain .foot
        {
            78px;
            height: 12px;
            background-color: Orange;
        }

原文地址:https://www.cnblogs.com/dreamhouse/p/2921697.html