练习题，什么时候使用padding什么时候使用margin？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  
    <title>CSS布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        /*此处写代码*/
        .header{
            width: 100%;
            height: 100px;
            background: #111;
        }

        .header .logo{
            float: left;
        }
        .header .logo img{
            margin-left: 50px;
            margin-top: 25px;
        }
        .header .nav{
            float: right;
            color: #fff;
            line-height: 100px;
        }
        .header .nav ul{
            margin-right: 30px;
            margin-bottom: 25px;
        }
        .header .nav li{
            list-style: none;
            float: left;
            margin: 0 13px;
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="header">
        <div class="logo">
            <img src="http://class.imooc.com/static/module/common/img/logo.png?t=2.3" />
        </div>
        <div class="nav">
            <ul>
                <li>前端</li>
                <li>后端</li>
                <li>移动端</li>
                <li>数据库</li>
            </ul>
        </div>
    </div>
</body>
</html>

现有如下问题：

list-style是加在ul上还是li上？
什么时候使用padding什么时候使用margin？
line-height是加在 div上还是ul上或者是li上?

Mr_Ludan 2017-04-15

源自：项目：网页布局案例 2-3 主体上面的图片

收起

2回答

路大锤 2017-04-15 17:23:40

1、ul中与li中都是可以生效的

2、何时应当使用margin：
   需要在border外侧添加空白时。
   空白处不需要背景（色）时。
     上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。
3、何时应当时用padding：
     需要在border内测添加空白时。
     空白处需要背景（色）时。