CSS 外边距（margin）

CSS中margin属性用来定义元素的外边距。什么是外边距呢？也就是此元素四周都会空出指定宽度的空白间距，这个事情比较难说清楚，直接看例子来试试吧：

p {
    border: 1px solid #46acb6;
    margin: 72px;
}

运行一下

Margin属性的取值

margin属性的取值有如下：

• auto - 浏览器自动设置以保证元素居中（之后会详细介绍）
• 具体数字加单位 - margin可以使用px、pt、cm等单位
• % - margin也可以直接使用百分比

Margin - 单独设置各方向的外边距

margin属性可设置元素四周的外边距距离，那如果想对上下左右不同方向分别单独设置外边距距离，则可使用到如下四种属性：

• margin-top
• margin-right
• margin-bottom
• margin-left

案例：

p {
    margin-top: 90px;
    margin-bottom: 36px;
    margin-right: 72px;
    margin-left: 108px;
}

运行一下

只用margin属性来分别设置各方向边距

洒家想只用margin属性来分别设置各方向边距的外边距；如此确实可行，margin属性确实可以涵盖四个方向且分别设置。

如果margin属性有4个值 - margin:25px 50px 75px 100px;（上边距为25px，右边距为50px，下边距为75px，左边距为100px。）

p {
    margin: 25px 50px 75px 100px;
}

运行一下

如果margin属性有3个值 - margin:25px 50px 75px;（上边距为25px，右边距和左边距都为50px，下边距为75px。）

p {
    margin: 25px 50px 75px;
}

运行一下

如果margin属性有2个值 - margin:25px 50px;（上边距和下边距都为25px，右边距和左边距都为50px。）

p {
    margin: 25px 50px;
}

运行一下

如果margin属性有1个值 - margin:25px;（四边的边距都为25px。）

p {
    margin: 25px;
}

运行一下

Margin的auto属性

margin属性的取值可以是auto，该取值的作用是让浏览器自动设置外边距以保证该元素水平方向上居中；一般情况下，取值auto前，都会设置好该元素的宽度；浏览器会保证左边距和右边距相等，且恰好这个值可以使元素水平方向上在正中间。如下例所示：

div {
    width: 300px;
    margin: auto;
    border: 1px solid #46acb6;
}

运行一下

如果有时上下边距也需要特别设定，则可以如下分开设置，效果也是可以保证的：

div {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 36px;
    border: 1px solid #46acb6;
}

运行一下

Margin的重叠

当上下相邻的元素之间都有外边距，则会外边距重叠，取最大外边距为双方公有的外边距，这就是所谓的margin重叠。如下例所示，h1元素的下边距为108px，h2元素的上边距为72px，表面上来看h1和h2元素之间的边距应该是180px，但是实际上因为上下外边距重叠消融，所以两者之间的外边距只有108px。

但是这种margin重叠只会出现在上下外边距重叠，而不会出现在左右边距重叠。

h1 {
    margin-bottom: 108px;
}

h2 {
    margin-top: 72px;
}

运行一下