CSS的margin/padding-block/inline-start/end属性你了解吗？margin-block你见过吗？

最近F12查看被ul的默认样式惊艳到了，前端开发最喜欢css样式初始化，清除了ul/ol li及dl>dt<dd的默认属性，以至于很多人往往忽略这些知识点：margin-block-start/margin-inline-start/padding-inline-start......

ul {
    display: block; /* 块级元素  */
    list-style-type: disc; /* 列表风格 圆点  */
    margin-block-start: 1em; /* 块级开始方向间距 1em */
    margin-block-end: 1em; /* 块级结束方向间距 1em */
    margin-inline-start: 0px; /* 行内开始方向间距 0px*/
    margin-inline-end: 0px; /* 行内结束方向间距 0px */
    padding-inline-start: 40px;  /* 行内开始方向填充  40px */
}

卧槽，这都是什么鬼！莫急，很多人除了常用的 display: block 估计剩下的全“瞎”了，看着是margin，padding，后面跟的属性却和认识的不太一样，其实还是有规律可循的！

定义

我们先看MDN对margin-inline-start解释：
margin-inline-start，定义了一个元素的逻辑直列开始余量，其被映射到基于该写入模式，方向性，并且元件的文本方向的物理余量（个人认为这是被翻译过来的直译意思，和我们理解的不一样）。

个人理解：行内排列方向开始的margin间距。

案例

...

...

莫要看图片上的文字，我忘记修改了

...

...

行内排列方向？怎么解释？方向性？我们知道行内排列受到方向的影响，浏览器默认是横排，从左往右方向，所以margin-inline-start就是行内左边的间距；不过，要是加了“writing-mode: vertical-rl” 垂直排列的属性，margin-inline-start就是行内顶部的间距。

所以说，margin/padding-inline-*  这些属性受到排列方向的影响，只要没有声明垂直排列，所有的浏览器都是默认横排。

会用了margin-inline-start/end，那么再来说一下它们的简写：

margin-inline:15px；// 行内间距前后各 15px
margin-inline:15px 30px；// 行内间距前 15px 后30px

我们看看再试试padding-inline:30px，看看浏览器如何是呈现渲染的？

从图上可以发现，padding-inline依旧按照“行内排列规则”，所以我们这样理解：
padding-inline 行内前后填充

行内都理解了，那么我们在测试一下margin-block:15px 30px，如下：

常规的想法肯定是 左右间距，没有想到 margin-block是块级上下间距排列了，这可能跟浏览器从上到下渲染块级上下文的规则有关系！

最后，再测试一下padding-block:30px的效果：

好像，padding-block也遵循块级上下排列，那么padding-block-start就是上填充，*-end就是下填充。
padding-block 块级前后填充（默认是上下方向）

兼容

总结

最后总结一下：

• margin-inline  行内前后间距（默认是左右方向）
• margin-block  块级前后间距（默认是上下方向）
• padding-inline 行内前后填充（默认是左右方向）
• padding-block 块级前后填充（默认是上下方向）

遇到“writing-mode: vertical-rl”方向改变的话，默认方向都顺时针旋转90°，例如margin-inline，行内前后就变成了上下，同理，其他的也都顺时针旋转90°。你学废了吗？其实建议懂其原理，即便面试遇到了，在纸上画一下，估计就会了，按照我的理解去看这样属性，不难！我是陈小知，不做无效分享！