首页手记 Margin 的特异之处

Margin 的特异之处

标签：

Html/CSS CSS3 深度学习

Margin 也可以改变元素的布局尺寸

通常，元素的布局尺寸是由 Content、Padding 和 Border 三个区域决定，而我们使用 margin，最常见的作用就是在空间上隔离自身与其他元素。但是，如果元素的宽高具有" 流动性(1) "，margin 也可以改变元素的布局尺寸。

*(1)可以参考：宽度的流动性与包裹性

例子：

<style>
    div {
        width: 200px;
        background: #ccc;
    }
    
    p {
        margin: 10px;
        background: #FFEB3B;
    }
</style>

<div>
    <p>hello</p>
</div>

例子中，我们可以看到，由于 margin 设置了 10px 的值，p 元素的宽度变为 180px。
反过来，如果将 margin 值设置为负数(2)，就可以增加 p 元素的可用宽度。

*(2)margin 的值可以是负数，也可以是百分比。如果是百分比值，和 padding 属性一样，四个方向都是基于其所在包含块宽度计算的。

例子：

<style>
    div {
        width: 200px;
        background: #ccc;
    }
    
    p {
        margin: -10px;
        background: #FFEB3B;
    }
</style>

<div>
    <p>hello</p>
</div>

多列布局

利用 margin 改变元素尺寸的这个特性，可以很方便地实现两列或多列布局:

例子：

<style>
    div {
        overflow: hidden;
    }
    
    span {
        background: darkmagenta;
        float: left;
        width: 50px;
        height: 100px;
    }
    
    p {
        margin: 0;
        margin-left: 60px;
        background: #FFEB3B;
    }
</style>

<div>
    <span></span>
    <p>白居易的诗虽浅显易懂，诗味却很浓郁，艺术成就极高，有《白氏长庆集》。</p>
</div>

Margin 合并

在标准文档流中，块级元素在垂直方向上会发生 margin 合并的现象，具体可以分为以下三种情况：

1、上下相邻的两个块级元素会发生外边距合并。

例子：

<style>
    p {
        margin: 15px 0;
    }
</style>

<p>AAA</p>
<p>BBB</p>

例子中，我们可以看到，第一个 p 元素和第二个 p 元素之间的距离是 15px，说明第一个 p 元素的 margin-bottom 与第二个 p 元素的 margin-top 合并在一起了，并非上下相加。

2、父块级元素与第一个、最后一个子块级元素会发生外边距合并。

例子：

<style>
    div {
        background: #eee;
    }
    
    p {
        margin: 15px 0;
    }
</style>

<div>
    <p>AAA</p>
    <p>BBB</p>
</div>

例子中，我们可以看到，虽然父元素 div 没有设置外边距，但第一个子元素 p 的 margin-top 与最后一个子元素 p 的 margin-bottom，全部作用在了父元素身上，导致父元素上下外边距皆为 15px。

3、空块级元素自身会发生外边距合并。

例子：

<style>
    div {
        background: #eee;
        overflow: hidden;
    }
    
    p {
        margin: 15px 0;
    }
</style>

<div>
    <p></p>
</div>

例子中，为了方便观察，我们为 p 元素设置了父元素 div。元素 div 的高度为 15px，说明空元素 p 的 margin-top 和 margin-bottom 合并在一起了。

合并的计算规则

可以简单总结为" 正正取其大，负负取其小，正负就相加 "。

例子1：正正取其大

<style>
    p {
        height: 20px;
        background: #00BCD4;
        margin: 0;
    }
    
    p:first-child {
        margin-bottom: 15px;
    }
    
    p:last-child {
        margin-top: 30px;
    }
</style>

<p></p>
<p></p>

例子中，由于" 正正取其大 "，因此第一个 p 元素与第二个 p 元素的间距为 30px。

例子2：负负取其小

<style>
    div {
        margin-bottom: -5px;
    }
    
    p {
        background: #00BCD4;
        height: 20px;
        margin: 0;
        margin-bottom: -10px;
    }
    
    hr {
        margin: 0;
        border: 1px solid #F44336;
    }
</style>

<div>
    <p></p>
</div>
<hr>

例子中，由于" 负负取其小 "，因此父元素 div 最终的下外边距为 -10px。

例子3：正负就相加

<style>
    div {
        margin-top: -15px;
    }
    
    p {
        background: #00BCD4;
        height: 20px;
        margin: 0;
        margin-top: 20px;
    }
</style>

<div>
    <p></p>
</div>

例子中，由于" 正负就相加 "，因此父元素 div 最终的上外边距为 5px。

优化合并

之所以没有强调" 避免合并 "，是因为 margin 合并有其存在的意义，尤其是上下相邻元素的合并，保证了元素上下间距的一致性。而父子合并与元素自身合并，则可以通过一些方法避免发生。

避免父子元素合并的方法：

父元素在垂直方向设置 border 或 padding 值；
父元素和子元素之间添加内联元素隔开( 内联元素需要有内容 )；
父元素设置 overflow: hidden、position: absolute、float: left / right 等属性；
针对父元素与最后一个子元素发生的 margin-bottom 合并，可以通过设置父元素的高度避免。

避免元素自身合并的方法：

元素自身在垂直方向设置 border 或 padding 值；
元素自身设置高度；

Margin 取值 auto 的作用

首先，观察下面的例子：

<style>
    div {
        width: 200px;
        background: #9E9E9E;
    }
    
    nav {
        width: 50%;
        height: 50px;
        margin: 0 auto;
        background: #00BCD4;
    }
</style>

<div>
    <nav></nav>
</div>

这种元素水平居中的布局，我相信大家都曾使用过。当我们分别为 margin-right 与 margin-left 设置 auto 时，就可以让元素 nav 的左右外边距一致，形成居中效果。
如果将 margin-left 设置为具体数值，margin-right 设置为 auto，可能很多人会认为 nav 的右外边距为 0，但实际并不是这样的：

例子：

<style>
    div {
        width: 200px;
        background: #9E9E9E;
    }
    
    nav {
        width: 50%;
        height: 50px;
        margin-left: 30px;
        margin-right: auto;
        background: #00BCD4;
    }
</style>

<div>
    <nav></nav>
</div>

通过例子可以看到，nav 的右外边距为 70px，正好是 nav 的包含块剩余的水平空间。因此可以说，margin 取值 auto，并非没有意义，而是可以自动填充元素所在包含块的剩余空间。
如果元素左右外边距都取值 auto ，自然也就会平分其包含块的剩余空间了。

" 流动性 "元素

上面的内容，我们讲了 margin 取值 auto 的作用，但其实这个作用是有前提条件的，就是元素的宽高具有" 流动性 “。” 包裹性 "元素，即使取值 auto，也是没有意义的。

例子：

<style>
    div {
        width: 200px;
        background: #9E9E9E;
    }
    
    span {
        display: inline-block;
        width: 50%;
        height: 50px;
        margin: 0 auto;
        background: #00BCD4;
    }
</style>

<div>
    <span>hello</span>
</div>