margin 属性用以设置元素的外边距，有以下取值：

长度
百分比：针对父元素宽度的百分比。
auto：让浏览器决定一个合适的外边距，通常用于居中。

$$warning

对于行内元素，上下外边距不起效。

$$tip

padding 与 margin 的区别：

padding 填充了元素的内容区域，可以增大背景色的范围，也可触发事件。
margin 用来控制元素之间的距离。

当设置值的数量不同时，应用的效果也不同：

/* 设置所有边距 */
margin: 10px;
/* 设置上下边距为 10px，左右边距为 20px */
margin: 10px 20px;
/* 设置上边距为 10px，左右边距为 20px，下边距为 30px （不推荐）*/
margin: 10px 20px 30px;
/* 设置上边距为 10px，右边距为 20px， 下边距为 30px，左边距为 40px */
margin: 10px 20px 30px 40px;

也可以单个边距设置值：

/* 设置上边距 */
margin-top: 10px;
/* 设置下边距 */
margin-bottom: 10px;
/* 设置左边距 */
margin-left: 10px;
/* 设置右边距 */
margin-right: 10px;

水平居中

通过设置块级元素的左右外边距为 auto 可以让其在父元素中居中。

右对齐

当设置块级元素的 margin-left 为 auto 时，可以使其右对齐。

<div class="box"></div>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: teal;

        margin-left: auto;
    }
</style>

$$demo

<div class="box"></div> <style> .box { width: 100px; height: 100px; background-color: teal;

    margin-left: auto;
}

</style>

外边距合并

当存在兄弟关系元素，上面的元素设置了 margin-bottom ，下面的元素设置了 margin-top，则间距只会是两者的最大值。
当存在父子关系的元素都设置了 margin-top，同样会外边距合并，结果为两者的最大值。

为什么存在外边距合并？

外边距合并可以更方便地设置文章中元素上下的间距，此时外边距的含义更像是上下最小间距。

p 元素和 h2 元素都有默认的上下外边距，我们用 div 元素来模拟一下。

<div class="h2">三眼鸭的编程教室</div>
<div class="p">三眼鸭的三眼鸭</div>
<div class="p">三眼鸭的三眼鸭</div>
<img src="https://3yya.com/jinji.jpg" />
<div class="p">三眼鸭的三眼鸭</div>
<style>
    .h2 {
        font-size: 24px;
        font-weight: bold;

        /* 上下元素最小间距 30px */
        margin: 30px 0;
    }
    .p {
        /* 上下元素最小间距 20px */
        margin: 20px 0;
    }
</style>

$$demo <div style="padding: 1px"> <div class="h2">三眼鸭的编程教室</div> <div class="p">三眼鸭的三眼鸭</div> <div class="p">三眼鸭的三眼鸭</div> <img src="https://3yya.com/jinji.jpg" /> <div class="p">三眼鸭的三眼鸭</div> </div> <style> .h2 { font-size: 24px; font-weight: bold;

    /* 上下元素最小间距 30px */
    margin: 30px 0;
}
.p {
    /* 上下元素最小间距 20px */
    margin: 20px 0;
}

</style>

此时模拟的 h2 元素的上下外边距为 30px ，由于与模拟的 p 元素产生了外边距合并，因此两者间的间距也只是 30px ，不会相加导致距离太远。

如果我们用 padding 来模拟外边距，由于没有外边距合并，设置起来就会特别繁琐。就像下面代码一样，模拟的 h2 元素需要事先判断上下元素固有的间距，再减去间距单独设置，才能达到上下间距最少为 30px 。

<div class="h2">三眼鸭的编程教室</div>
<div class="p">三眼鸭的三眼鸭</div>
<div class="p">三眼鸭的三眼鸭</div>
<img class="img" src="https://3yya.com/jinji.jpg" />
<div class="p">三眼鸭的三眼鸭</div>
<style>
    .h2 {
        font-size: 24px;
        font-weight: bold;

        /* 距离顶部 30px */
        padding-top: 30px;

        /* 由于边距会相加 */
        /* 得事先减去下面元素的边距 */
        /* 再单独设置 padding-bottom */
        padding-bottom: 20px;
    }
    .p {
        padding: 10px 0;
    }
    .img {
        /* 需额外设置图片的间距 */
        padding: 10px 0;
    }
</style>

$$demo

<div class="h2">三眼鸭的编程教室</div> <div class="p">三眼鸭的三眼鸭</div> <div class="p">三眼鸭的三眼鸭</div> <img class="img" src="https://3yya.com/jinji.jpg" /> <div class="p">三眼鸭的三眼鸭</div> <style> .h2 { font-size: 24px; font-weight: bold;

    /* 距离顶部 30px */
    padding-top: 30px;

    /* 由于边距会相加 */
    /* 得事先减去下面元素的边距 */
    /* 再单独设置 padding-bottom */
    padding-bottom: 20px;
}
.p {
    padding: 10px 0;
}
.img {
    /* 需额外设置图片的间距 */
    padding: 10px 0;
}

</style>

$$tip

外边距合并是有一定意义的，平时应该善用外边距合并，而不是视之于猛兽。

解决外边距合并的办法

如果非要避免外边距合并，也有一些办法。

兄弟元素之间：

将一个元素设置 display: inline-block; 。
只设置一个元素的外边距（推荐）。

父子元素之间：

将一个元素设置 display: inline-block; 。
给父元素设置 padding: 1px; 。
给父元素设置 border: 1px solid transparent; 。
只设置一个元素的外边距（推荐）。

$$tip

很多解决外边距合并的问题总会或多或少有一些副作用。

最好的方式还是理清元素关系，考虑到外边距合并的前提下，设置一个合理的外边距。

练习

完成以下实例。

$$demo

<div class="row"> <div class="box1"></div> <div class="box2"></div> </div> <div> <div class="box1"></div> <div class="box2"></div> </div> <style> .box1 { display: inline-block; width: 100px; height: 100px;

    background-color: teal;
    margin-right: 50px;
}
.box2 {
    display: inline-block;
    width: 50px;
    height: 50px;

    background-color: pink;
}
.row {
    margin-bottom: 50px;
}

</style>

$$answer

<div class="row">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div>
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<style>
    .box1 {
        display: inline-block;
        width: 100px;
        height: 100px;

        background-color: teal;
        margin-right: 50px;
    }
    .box2 {
        display: inline-block;
        width: 50px;
        height: 50px;

        background-color: pink;
    }
    .row {
        margin-bottom: 50px;
    }
</style>