谈一谈margin-inline与margin-block

作为一名前端工程师,margin这个css属性想必各位都十分熟悉。那么在实际的工作,各位是不是还在用以下的方式来给一个元素设置上下外边距:

css 复制代码
{
    margin-top: 10px;
    margin-bottom: 10px;
}

或者:

css 复制代码
{
    margin: 10px 0;
}

对于第一种写法,需要一次设置两个属性,而第二种写法虽然简便一些,但也需要设置左右外边距为0,看起来也不够优雅。

所以这时就需要用到margin-inlinemargin-block来帮助我们更加方便与优雅的设置元素的外边距。

writing-mode

在了解margin-inlinemargin-block之前,还需要稍微了解一下writing-mode这个属性。writing-mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。默认情况下writting-mode默认值是horizontal-tb,表示文本按照水平方向从左到右书写。如果想要将文本的排列方式改为垂直方向右到左书写,就可以这样设置:

css 复制代码
{
    writing-mode: vertical-rl;
}

具体效果如下:

html 复制代码
    <div>这是一段文字</div>
    <div class="vertical">这是一段文字</div>
css 复制代码
div{
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

.vertical{
    writing-mode: vertical-rl;
}

margin-inline

那么先介绍一下margin-inlinemargin-inline定义了元素的逻辑行首和行末外边距,并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。margin-inline 属性可用一个或两个值指定。

  • 用一个值指定时,行首和行末应用同样的外边距。
  • 用两个值指定时,第一个外边距应用于行首,第二个应用于行末。

光看概念有点难以理解,下面我们结合具体的例子来理解。

首先我们先定义三个元素,他们的样式以及效果如下:

html 复制代码
    <div class="container">
        <div class="item">这是第一个元素</div>
        <div class="item example-element">这是第二个元素</div>
        <div class="item">这是第三个元素</div>
    </div>
css 复制代码
.container{
    display: flex;
}

.item{
    width: 150px;
    border: 5px solid #cc5595;
    background-color: #36292f;
    color: #ffffff;
    text-align: center;
}

.example-element{
    height: 200px;
}

我们开始蹂躏第二个元素:

css 复制代码
.example-element{
    height: 200px;
    margin-inline: 10px;
}

此时在水平方向上,第二个元素的左右外边距都设置为10px。我们继续:

css 复制代码
.example-element{
    height: 200px;
    margin-inline: 10px;
    writing-mode: vertical-rl;
}

在给第二个元素的writing-mode属性设置为vertical-rl之后,文本的排列方式变为从上到下的垂直排列,此时我们使用margin-inline设置的外边距也变成垂直方向的上下外边距。

再来一些的变化:

css 复制代码
.example-element{
    height: 200px;
    margin-inline: 10px 20px;
    direction: rtl;
}

可以看到在使用direction设置方向之后,元素的逻辑行首变为了右边,所以此时右外边距为10px,元素的逻辑行末在左边,所以左外边距为20px。

margin-block

在了解了margin-inline之后,margin-block也变得容易理解了,不过还是先把概念先贴在这里:margin-block 定义了元素的逻辑块首和块末外边距,并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。margin-block 属性可用一个或两个值指定。

  • 用一个值指定时,块首和块末应用同样的外边距。
  • 用两个值指定时,第一个外边距应用于块首,第二个应用于块末。

继续用上面的div三兄弟来继续举例说明:

css 复制代码
.container{
    display: flex;
    flex-direction: column;
    width: 150px;
}

.item{
    border: 5px solid #cc5595;
    background-color: #36292f;
    color: #ffffff;
    text-align: center;
}

.example-element{
    margin-block: 10px;
}

第二个元素垂直方向的上下外边距都设置为10px。

css 复制代码
.example-element{
    margin-block: 10px;
    writing-mode: vertical-lr;
}

第二个元素水平方向的左右外边距都设置为10px。

css 复制代码
.example-element{
    margin-block: 10px 20px;
    writing-mode: vertical-rl;
}

由于writing-mode: vertical-rl;会设置文本从右到左书写。所以此时右边的外边距为10px,左边的外边距为20px。

浏览器兼容性

margin-inlinemargin-block的浏览器兼容性如图所示:

可以看见除了ie浏览器外,大部分的现代浏览器都是支持这两个属性的,所以如果没有特殊情况可以放心大胆的使用。

相关推荐
ZJ_.8 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营12 分钟前
Vue零基础教程|从前端框架到GIS开发系列课程(七)响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood38 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端39 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8543 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235612 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O4 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js