谈一谈margin-inline与margin-block

作为一名前端工程师，margin这个css属性想必各位都十分熟悉。那么在实际的工作，各位是不是还在用以下的方式来给一个元素设置上下外边距：

{
    margin-top: 10px;
    margin-bottom: 10px;
}

或者：

{
    margin: 10px 0;
}

对于第一种写法，需要一次设置两个属性，而第二种写法虽然简便一些，但也需要设置左右外边距为0，看起来也不够优雅。

所以这时就需要用到margin-inline和margin-block来帮助我们更加方便与优雅的设置元素的外边距。

writing-mode

在了解margin-inline和margin-block之前，还需要稍微了解一下writing-mode这个属性。writing-mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。默认情况下writting-mode默认值是horizontal-tb，表示文本按照水平方向从左到右书写。如果想要将文本的排列方式改为垂直方向右到左书写，就可以这样设置：

{
    writing-mode: vertical-rl;
}

具体效果如下：

    <div>这是一段文字</div>
    <div class="vertical">这是一段文字</div>

div{
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

.vertical{
    writing-mode: vertical-rl;
}

margin-inline

那么先介绍一下margin-inline：margin-inline定义了元素的逻辑行首和行末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。margin-inline 属性可用一个或两个值指定。

• 用一个值指定时，行首和行末应用同样的外边距。
• 用两个值指定时，第一个外边距应用于行首，第二个应用于行末。

光看概念有点难以理解，下面我们结合具体的例子来理解。

首先我们先定义三个元素，他们的样式以及效果如下：

    <div class="container">
        <div class="item">这是第一个元素</div>
        <div class="item example-element">这是第二个元素</div>
        <div class="item">这是第三个元素</div>
    </div>

.container{
    display: flex;
}

.item{
    width: 150px;
    border: 5px solid #cc5595;
    background-color: #36292f;
    color: #ffffff;
    text-align: center;
}

.example-element{
    height: 200px;
}

我们开始蹂躏第二个元素：

.example-element{
    height: 200px;
    margin-inline: 10px;
}

此时在水平方向上，第二个元素的左右外边距都设置为10px。我们继续：

.example-element{
    height: 200px;
    margin-inline: 10px;
    writing-mode: vertical-rl;
}

在给第二个元素的writing-mode属性设置为vertical-rl之后，文本的排列方式变为从上到下的垂直排列，此时我们使用margin-inline设置的外边距也变成垂直方向的上下外边距。

再来一些的变化：

.example-element{
    height: 200px;
    margin-inline: 10px 20px;
    direction: rtl;
}

可以看到在使用direction设置方向之后，元素的逻辑行首变为了右边，所以此时右外边距为10px，元素的逻辑行末在左边，所以左外边距为20px。

margin-block

在了解了margin-inline之后，margin-block也变得容易理解了，不过还是先把概念先贴在这里：margin-block 定义了元素的逻辑块首和块末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。margin-block 属性可用一个或两个值指定。

• 用一个值指定时，块首和块末应用同样的外边距。
• 用两个值指定时，第一个外边距应用于块首，第二个应用于块末。

继续用上面的div三兄弟来继续举例说明：

.container{
    display: flex;
    flex-direction: column;
    width: 150px;
}

.item{
    border: 5px solid #cc5595;
    background-color: #36292f;
    color: #ffffff;
    text-align: center;
}

.example-element{
    margin-block: 10px;
}

第二个元素垂直方向的上下外边距都设置为10px。

.example-element{
    margin-block: 10px;
    writing-mode: vertical-lr;
}

第二个元素水平方向的左右外边距都设置为10px。

.example-element{
    margin-block: 10px 20px;
    writing-mode: vertical-rl;
}

由于writing-mode: vertical-rl;会设置文本从右到左书写。所以此时右边的外边距为10px，左边的外边距为20px。

浏览器兼容性

margin-inline和margin-block的浏览器兼容性如图所示：

可以看见除了ie浏览器外，大部分的现代浏览器都是支持这两个属性的，所以如果没有特殊情况可以放心大胆的使用。