css margin-inline

白云飞扬
109 阅读2分钟

学习css的新特性吧

margin-inline

margin-inline :盒子模型的 逻辑行首和行末外边距, 注意不是 左右外边距, 可以理解为文本开始的位置、文本结束位置的外边距

margin-inline-start：盒子模型的 逻辑行首外边距，不是 左边的外边距

margin-inline-end：盒子模型的 逻辑行末外边距，不是 右边的外边距

根据 writing-mode、direction 和 text-orientation 所定义的值，来决定生效的方向

类似的属性有 padding-inline, border-inline,margin-block,,,这类属性叫做逻辑属性

image.png

image.png

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        border: 2px solid #d64747;
      }
      .margin-box {
        margin: 20px;
      }
      .margin-inlne-box {
        margin-inline: 20px;
      }
      .margin-inline-start-box {
        margin-inline-start: 20px;
      }
      .margin-inline-end-box {
        margin-inline-end: 20px;
      }
    </style>
  </head>
  <body>
    <div style="display: flex">
      <div class="box margin-box">margin-box</div>
      <div class="box margin-inlne-box">margin-inlne-box</div>
      <div class="box margin-inline-start-box">margin-inline-start-box</div>
      <div class="box margin-inline-end-box">margin-inline-end-box</div>
    </div>
  </body>
</html>

margin-block

元素的逻辑块首和块末外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .border {
        border: 2px solid chocolate;
      }
      .box1 {
        margin-block: 20px;
      }
      .box2 {
        writing-mode: vertical-lr;
        margin-block: 20px;
      }
    </style>
  </head>
  <body>
    <div class="border box1">枯藤老树昏鸦，小桥流水人家，古道西风瘦马。 夕阳西下，断肠人在天涯。margin-block: 20px</div>
    <div class="border box2">枯藤老树昏鸦，小桥流水人家，古道西风瘦马。 夕阳西下，断肠人在天涯。writing-mode: vertical-lr; margin-block: 20px;</div>
  </body>
</html>

writing-mode: 定义了文本的排列方向 水平或者垂直， 以及在块级元素中文本的行进方向 从左到右 从右到左

direction ：文本方向

请注意，文本方向通常在文档中定义（例如，使用 HTML 的 dir 属性 属性），而不是通过直接使用 direction 属性来定义。

direction: ltr; 从左到右 默认属性

direction: rtl; 从右到左

text-orientation

设置字符的方向，仅影响纵向模式下的文本（writing-mode的值不是horizontal-tb） 此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头

/* Keyword values */
text-orientation: mixed;  默认值
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

margin-inline 与 writing-mode

当writing-mode的值不是horizontal-tb , margin-inline 生效的是上下方向 （margin-top margin-bottom）

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .text {
        writing-mode: vertical-lr;
        margin-inline: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="text">锄禾日当午</div>
    </div>
  </body>
</html>

writing-mode 与 text-orientation

image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .text {
        writing-mode: vertical-lr;
        margin-inline: 20px;
        text-orientation: upright;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="text">锄禾日当午 hello world!!!</div>
    </div>
  </body>
</html>

image.png

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .text1 {
        writing-mode: vertical-lr;
        margin-inline: 20px;
        text-orientation: upright;
      }
      .text2{
        writing-mode: vertical-lr;
        text-orientation: sideways;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="text1">锄禾日当午 hello world!!!</div>
      <div class="text2">汗滴禾下土 hello world!!!</div>
    </div>
  </body>
</html>
avatar
文章
阅读
粉丝