内外边距

内外边距

• 四边

  • 外边距: 标签与标签之间的距离
    • margin: 10px 上下左右均为 10px
    • margin: 10px 20px 上下10 左右20
    • margin: 10px 20px 30px 上10 左右20 下30
    • margin: 10px 20px 30px 40px 上10 右20 下30 左40
  • 内边距: 标签与内容之间的距离
    • padding: 10px 上下左右均为 10px
    • padding: 10px 20px 上下10 左右20
    • padding: 10px 20px 30px 上10 左右20 下30
    • padding: 10px 20px 30px 40px 上10 右20 下30 左40

• 单边

  • 外边距: margin-方向
  • 内边距: padding-方向

• 技巧:
  外边距可实现 标签本身水平居中（基于父级宽度）
  margin-left: auto;
margin-right: auto;
  也可以利用简写实现左右 auto margin: 0 auto;

<style>
        body{margin:0;}
        ul{padding:0;}
        .box{width: 100px; height: 100px; }
        .box1{background: #EC6F6F;}
        .box2{background: #6CB1EF;}
        .box3{background: #9DF282;}
        .box2{
            margin: 10px;
            margin: 10px 20px;
            margin: 10px 20px 30px; 
            margin: 10px 20px 30px 40px; 
            padding: 10px;
            padding: 10px 20px;
            padding: 10px 20px 30px;
            padding: 10px 20px 30px 40px;
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            margin: 0px auto;
            margin: 100px auto 30px;
        }
        input{
            padding-left: 20px;
        }
        .top{
            width: 100%;
            height: 50px;
            background:#333;
        }
        .top .container{
            width: 1226px;
            height: 50px;
            /* background: pink; */
            margin: 0 auto;
        }
        .top ul li{
            list-style: none;
            color: #959393;
            margin-right: 15px;
            line-height: 50px;
            float: left;
        }
        .top ul li:hover{
            cursor: pointer;
            color: #fff;
        }
</style>

<div class="box box1"></div>
    <div class="box box2"> 小鸡腿, 烤猪蹄, 鸭腿, 四喜丸子 </div>
    <div class="box box3"></div>
    <br><br>

    <input type="text">

    <div class="top">
        <div class="container">
            <ul>
                <li>小米商城</li>
                <li>MIUI</li>
                <li>loT</li>
                <li>云服务</li>
            </ul>
        </div>
    </div>