第12天 | 16天搞定前端，CSS的边距，内外有别?

好多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。

12.1 内外抉择

在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。

这是用padding的学问

（1）需要在border内侧添加空白，在文字与边框留有距离时；

（2）空白处需要背景色时；

（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。

这是用margin的学问

（1）需要在border外侧添加空白时;

（2）空白处不需要有背景色时;

(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。

12.2 内外有别

在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。

在CSS表文件ys2.css中的代码

/*单独指定一个边距*/
.one-margin {
    margin-left: 100px;
}

/*4个边距*/
.four-margin {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
}

/*加上padding*/
.use-padding {
    background: cadetblue;
    width: 400px;
    height: 200px;
    margin: 10px 20px 30px 50px;
    padding-top: 20px;
}

在HTML文件中的代码

<div class="big-div">
    <h1 class="one-margin">margin用法</h1>
    <div class="four-margin">
        margin一个值：4个边距;<br/>
        margin两个值：上下边距、左右边距;<br/>
        margin三个值：上边距、左右边距、下边距;<br/>
        margin四个值：上边距、右边距、下边距、左边距。
    </div>
    <div class="use-padding">
        padding一个值：4个边距;<br/>
        padding两个值：上下边距、左右边距;<br/>
        padding三个值：上边距、左右边距、下边距;<br/>
        padding四个值：上边距、右边距、下边距、左边距。<br/>
        为了区分margin和margin，我只用 padding-top,你能看出效果么?
    </div>
</div>

输出结果