CSS 属性

元素的逻辑内联起始边距由 CSS 属性 margin-inline-start 指定。元素的书写模式、方向性和文本方向都会影响实际的物理边距。

属性值

以下列表涵盖了 margin-inline-start 属性的所有可能值 ,类似于 margin-left 属性。

  • <length>: 边距大小的固定值。

  • <percentage>: 相对于所包含块的内联大小或writing-mode定义的宽度测量的边距百分比。

  • auto: 可用水平空间的百分比分配给左边距,选择的布局选项起着关键作用。

    margin-leftmargin-right 值相等。都设置为 auto 时,它们之间的间距相等。

适用范围

所有元素,除了具有除 table-caption、table 和 inline-table 之外的表格显示类型的元素。它也适用于 ::first-letter

语法

margin-inline-start = <'margin-top'> 

CSS margin-inline-start: 长度值

以下示例演示了 margin-inline-start 与长度值的用法。

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #f5f1b8;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #e67f09;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline-start: 25px;
   }
   .marginBox {
      background-color: #d7e609;
      border: solid 2px #46262A;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-inline-start 属性.</h1>
<div id="Container">
   <div class="marginBox">Box A</div>
      <div class="marginDemo">
         css margin-inline-start 属性示例。
      </div>
   <div class="marginBox">Box B</div>
</div>
</body>
</html> 

CSS margin-inline-start: 百分比值

以下示例演示了 margin-inline-start 与百分比值的用法。

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #dcdce0;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #87b9e8;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline-start: 15%;
   }
   .marginBox {
      background-color: #1272cc;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-inline-start 属性.</h1>
<div id="Container">
   <div class="marginBox">Alpha</div>
      <div class="marginDemo">
         css margin-inline-start 属性示例。
      </div>
   <div class="marginBox">Beta</div>
</div>
</body>
</html> 

CSS margin-inline-start: auto 和writing-mode

以下示例演示了 margin-inline-start 与 auto 值和写入模式:vertical-rl 的用法。

<html>
<head>
<style>
   body {
      background-color: #F1F1F1;
   }
   #Container {
      height: 280px;
      background-color: #dcdce0;
   }
   #Container > div {
      width: 150px;
      height: 200px;
      float: left;
      box-sizing: border-box;
   }
   .marginDemo {
      background-color: #d6625e;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      margin-inline-start: auto;
      writing-mode: vertical-rl;
   }
   .marginBox {
      background-color: #cc110a;
      border: solid 3px #46262A;
      text-align: center;
      font-size: 20px;
      padding: 10px;
   }
</style>
</head>
<body>
<h1> margin-inline-start 属性.</h1>
<div id="Container">
   <div class="marginBox">Alpha box</div>
      <div class="marginDemo">
         css margin-inline-start 属性示例。
      </div>
   <div class="marginBox">Beta box</div>
</div>
</body>
</html>