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

栏目: CSS · 发布时间: 6年前

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

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

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

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

一、了解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-sizeborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthinline-sizeinset-block-endinset-block-startinset-inline-endinset-inline-startmargin-block-endmargin-block-startmargin-inline-endmargin-inline-startmax-block-sizemax-inline-sizemin-block-sizemin-inline-sizepadding-block-endpadding-block-startpadding-inline-endpadding-inline-start

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

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

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

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

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

了解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;
}

结果如下截图:

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

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

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

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

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

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

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

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

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

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

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

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

三、结束语

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

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

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

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

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

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

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

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

(本篇完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机是怎样跑起来的

计算机是怎样跑起来的

[日] 矢泽久雄 / 胡屹 / 人民邮电出版社 / 2015-5 / 39.00元

本书倡导在计算机迅速发展、技术不断革新的今天,回归到计算机的基础知识上。通过探究计算机的本质,提升工程师对计算机的兴趣,在面对复杂的最新技术时,能够迅速掌握其要点并灵活运用。 本书以图配文,以计算机的三大原则为开端、相继介绍了计算机的结构、手工汇编、程序流程、算法、数据结构、面向对象编程、数据库、TCP/IP 网络、数据加密、XML、计算机系统开发以及SE 的相关知识。 图文并茂,通俗......一起来看看 《计算机是怎样跑起来的》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具