最近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-*  这些属性受到排列方向的影响,只要没有声明垂直排列,所有的浏览器都是默认横排。
CSS的margin/padding-block/inline-start/end属性你了解吗?margin-block你见过吗?-Qui-Note
会用了margin-inline-start/end,那么再来说一下它们的简写:

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

我们看看再试试padding-inline:30px,看看浏览器如何是呈现渲染的?
CSS的margin/padding-block/inline-start/end属性你了解吗?margin-block你见过吗?-Qui-Note
从图上可以发现,padding-inline依旧按照“行内排列规则”,所以我们这样理解:
padding-inline 行内前后填充

行内都理解了,那么我们在测试一下margin-block:15px 30px,如下:
CSS的margin/padding-block/inline-start/end属性你了解吗?margin-block你见过吗?-Qui-Note
常规的想法肯定是 左右间距,没有想到 margin-block是块级上下间距排列了,这可能跟浏览器从上到下渲染块级上下文的规则有关系!

最后,再测试一下padding-block:30px的效果:
CSS的margin/padding-block/inline-start/end属性你了解吗?margin-block你见过吗?-Qui-Note
好像,padding-block也遵循块级上下排列,那么padding-block-start就是上填充,*-end就是下填充。
padding-block 块级前后填充(默认是上下方向)

兼容

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

总结

最后总结一下:

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

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