CSS margin-inline和margin-block区别是什么？

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8132

本文可全文转载，个人博客无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、了解CSS逻辑属性

所谓CSS逻辑属性，指的是 *-start ， *-end 以及 *-inline-start ， *-inline-end ， *-block-start ， *-block-start 这类CSS属性，其最终渲染的方向是有逻辑性在里面的。

例如 margin-left 方向是固定的，就左侧间距，没有逻辑；但是， margin-start 有可能是左间距，也有可能是右间距，例如，对于内联元素，如果 direction 属性值是 rtl ，则 margin-start 的表现等同于 margin-right ，如果属性值是 ltr ，则 margin-start 的表现等同于 margin-left ，就表现出了逻辑判断在里面，因此，成为CSS逻辑属性。

// zxx: 如果对 direction 属性不是很了解，可以参考这篇文章“ CSS direction属性简介与实际应用 ”。

CSS逻辑属性很多，包括： block-size ， border-block-end ， border-block-end-color ， border-block-end-style ， border-block-end-width ， border-block-start ， border-block-start-color ， border-block-start-style ， border-block-start-width ， border-inline-end ， border-inline-end-color ， border-inline-end-style ， border-inline-end-width ， border-inline-start ， border-inline-start-color ， border-inline-start-style ， border-inline-start-width ， inline-size ， inset-block-end ， inset-block-start ， inset-inline-end ， inset-inline-start ， margin-block-end ， margin-block-start ， margin-inline-end ， margin-inline-start ， max-block-size ， max-inline-size ， min-block-size ， min-inline-size ， padding-block-end ， padding-block-start ， padding-inline-end ， padding-inline-start 。

标题所提到的 margin-inline 和 margin-block 也是CSS逻辑属性，前者是 margin-inline-start 和 margin-inline-end 的缩写，后者是 margin-block-start 和 margin-block-end 的缩写。

二、margin-inline和margin-block的区别

CSS逻辑属性浏览器支持还算早，例如 text-align-start 和 text-align-end ，以及我没记错的话，之前Chrome版本还有非标准的 -webkit-margin-before 和 -webkit-margin-end 。然后最近的Chrome版本69完全支持CSS逻辑属性后，去掉了。参见下面截图纯绿色部分：

对于 margin 这种4个方向都可以生效的元素而言， *-start ， *-end 这种设计是有局限的，一旦使用 writing-mode 属性改变水平流为垂直流，则 *-start 就会和 *-top 发生冲突。而标准的CSS逻辑属性增加了 inline 和 block 一层区分，则就没有这个问题。

了解margin-inline和margin-block

乍一看，我们可能会误认为 margin-inline 是对inline元素生效的， margin-block 是对block元素生效的。实际上不是的，千万不要被表面迷惑，inline和block其实指的是方向。

在CSS世界中，inline元素的排列默认是水平的，从左往右，block元素的排列是垂直的，从上往下。

所以，在中文或英文网页环境中，默认情况下， margin-inline 指的是水平方向的 margin 控制，而 margin-block 指的是垂直方向的 margin 控制。

一图胜千言，一例胜千图，您可以狠狠地的点击这里： 默认margin-inline-start和margin-block-start表现demo

上下两个元素，分别设置CSS如下：

.inline-start {
    margin-inline-start: 40px;
}
.block-start {
    margin-block-start: 40px;
}

结果如下截图：

可以看到，设置 margin-inline-start:40px 的元素其样式表现等同于 margin-left:40px ，因为此时文字这个inline元素的排版方向是左→右，因此 inline-start 是左left。

类似的，设置 margin-block-start:40px 的元素，其block元素此时的排版方向是上↓下，因此 block-start 是上top。最终样式表现等同于 margin-top:40px 。

下面，我们设置两个元素 direction:rtl ，则表现如下：

inline元素的排版方向变成了右→左，因此， margin-inline-start:40px 这里的 start 指的就是 right ，由此右间距 40px 。

writing-mode 属性可以改变block元素的排版方向，从垂直变成水平，因此，设置两个元素 writing-mode:vertical-lr ，两元素效果表现如下截图：

// zxx: 如果对 writing-mode 属性不是很了解，可以参考这篇文章“ 改变CSS世界纵横规则的writing-mode属性 ”。

提示：demo页面提供了切换按钮，大家可以自行亲自感受布局的变化。

margin-inline和margin-block的区别是什么？

margin-inline 和 margin-block 的区别在于， 一个表示 inline 元素排版方向，一个表示 block 元素排版方向。

三、结束语

除了 direction 和 writing-mode 这两个CSS属性， text-orientation 也是可以影响 *-inline-start ， *-inline-end ， *-block-start ， *-block-start 这些CSS属性的定位的。

text-orientation 是一个比较新的CSS3属性，IE包括Edge18都尚未支持。其作用可以让英文字母都竖着同时垂直排列（见下截图）， writing-mode 只能让东亚语言竖排。

这个以后有机会再深入讲解。

好，本文就到这里，感谢阅读，欢迎交流。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8132

（本篇完）