CSS 属性

元素的逻辑块起始边距是通过 CSS 属性 margin-block-start 指定的。元素的书写风格、方向性和文本方向定义了其实际的物理边距。

属性值

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

  • <length> - 边距大小的固定值。
  • <percentage> - 相对于所包含块的内联大小或水平语言中书写模式定义的宽度测量的边距百分比。
  • auto - 可用水平空间的百分比分配给左边距，选择的布局选项起着至关重要的作用。
  • 当 margin-left 和 margin-right 值都设置为 auto 时，它们之间的间距相等。

适用范围

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

语法

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

CSS margin-block-start: 长度值

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

<html>
<head>
<style>
   body {
      background-color: #dfe4ed;
   }
   #customDIV {
      height: 400px;
      background-color: #edecb7;
      padding: 20px;
   }
   .marginDemo {
      width: 250px;
      background-color: #6c7cf5;
      border: 2px dashed black;
      margin-block-start: 25px;
   }
   .marginBox {
      width: 250px;
      background-color: #f5d902;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-block-start 属性</h1>
<div id="customDIV">
<p>黄色 div 元素强调蓝色框周围的边距。</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         margin-block-start 属性的示例。
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block-start: 百分比值

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

<html>
<head>
<style>
   body {
      background-color: #dfe4ed;
   }
   #customDIV {
      height: 400px;
      background-color: #f0f0c5;
      padding: 20px;
   }
   .marginDemo {
      width: 250px;
      background-color: #db26de;
      border: 2px dashed black;
      margin-block-start: 5%;
   }
   .marginBox {
      width: 250px;
      background-color: #e8a53a;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-block-start 属性</h1>
<div id="customDIV">
<p>橙色 div 元素强调紫色框周围的边距。</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         margin-block-start 属性的示例。
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block-start: auto 

以下示例演示了使用 auto 值的 margin-block-start 的用法。

<html>
<head>
<style>
   body {
      background-color: #F2EFEF;
   }
   #customDIV {
      height: 400px;
      background-color: #FFEEA8;
      padding: 20px;
   }
   .marginDemo {
      width: 250px;
      background-color: #6495ED;
      border: 4px dashed #4682B4;
      margin-block-start: auto;
   }
   .marginBox {
      width: 250px;
      background-color: #FFA07A;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-block-start 属性</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
      margin-block-start 属性的示例。
      </div>
   <div class="marginDemo">box</div>
</div>
</body>
</html>

CSS margin-block-start: writing-mode

以下示例演示了 margin-block-start 的用法具有长度值和写入模式:vertical-rl。

<html>
<head>
<style>
   body {
      background-color: #F1ECEC;
   }
   #customDIV {
      height: 400px;
      background-color: #FFF7B0;
      padding: 20px;
   }
   .marginDemo {
      width: 50px;
      background-color: #8B78B6;
      border: 2px dashed black;
      margin-block-start: 25px;
      writing-mode: vertical-rl;
   }
   .marginBox {
      width: 250px;
      background-color: #F3994D;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-block-start 属性</h1>
<div id="customDIV">
<p>橙色 div 元素强调紫色框周围的边距。</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         margin-block-start 属性的示例。
      </div>
<div class="marginBox">box</div>
</div>
</body>
</html>