CSS margin-inline和margin-block区别是什么?
source link: https://www.zhangxinxu.com/wordpress/2018/10/diff-css-margin-inline-margin-block/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
(本篇完)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK