margin-inline, margin-block，这是啥 CSS 属性？

大家好，我是楷鹏。

当你一开始看到 margin-inline 时，是不是有种似曾相识的感觉，毕竟你学过 margin 和 display: inline，却还从来没有见过两个的结合物。

除了margin-inline，另外还有 margin-block，padding-inline, padding-block， 这种后缀带有-inline或者-block的属性称之为逻辑属性（logical properties）。

逻辑属性其实很简单，没啥深奥的魔法，我们来通过一个例子看一下。

首先介绍一个叫做 writting-mode 属性，它控制文字的方向，举个例子 🌰：

在这个元素中，我们放了一行简单的文字，writting-mode 默认值是 horizontal-tb

✨ 其实说默认值不太对严谨，应该是“user agent”，也就是每一个浏览器默认给的样式，就是你见到的最丑的兜底样式，关于 CSS 如何选择样式，可以见笔者之前的文章

👉 CSS的Cascade如何理解

我们修改一下 writting-mode:

{
  writing-mode: vertical-rl;
}

可以看到，文字排列方向从原来「水平地从左到右」变成「垂直地从右到左」。

好了，你大概了解了 writting-mode，接下来我们恢复原状。

并给它添加上 border-inline：

{
  border-inline: 10px solid cadetblue;
}

cadetblue 是军蓝色

看起来实际效果相当于设置了 border-left 和 border-right。

但当我们把 writing-mode 改为 vertical-rl 后：

效果变成了设置 border-top 和 border-bottom。

思考一下，这里 border-inline 其实就是先判断 writting-mode，根据它的值进行再进一步确定自己的值。

看完这个例子，大腿一拍，这不就是套了一层 if/else 逻辑判断。

那这样的好处是什么呢？

显而易见的优势是，增加了排版的灵活性，由于 border-left、border-top 等定死一处位置的属性，border-inline 更加灵活，适时而变。

一个实际的例子就是国际化中，有些语言，像阿拉伯语和希伯来语，书写方式是从右到左书写的，用 border-inline 可以直接方便地调整样式。

好了，既然已经了解逻辑属性的奥秘，我们需要来补充一下其他细节

• border-inline 实际上 border-inline-start 和 border-inline-end 的缩写形式。
• 不仅 writing-mode，逻辑属性还会受 direction 和 text-orientation 影响。

---

Reference

• https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

---

One more thing：

{
  "公众号": "程序员楷鹏",
  "简介": "世界有 10 种人，一种是懂二进制的，另外一种是不懂的",
  "还有": "你肯定会关注的对吧彦祖？"
}