CSS 属性

元素的逻辑块结束边距由 margin-block-end CSS 属性指定，该属性根据元素的写入模式、方向性和文本方向转换为物理边距。

属性值

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

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

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

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

    margin-right 值在两者都设置时相等

适用范围

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

语法

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

CSS margin-block-end: 长度值

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

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

CSS margin-block-end: 百分比值

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

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

CSS margin-block-end: auto Value

以下示例演示了具有 auto 值的 margin-block-end 的用法。

<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-end: auto;
   }
   .marginBox {
      width: 250px;
      background-color: #FFA07A;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-block-end 属性例子</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         margin-block-end 属性示例
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>

CSS margin-block-end: writing-mode

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

<html>
<head>
<style>
   body {
      background-color: #E3EAE9;
   }
   #customDIV {
      height: 500px;
      background-color: #FFEACB;
      padding: 20px;
   }
   .marginDemo {
      width: 50px;
      background-color: #87CEEB;
      border: 4px dashed #2E517F;
      margin-block-end: 20px;
      writing-mode: vertical-rl;
   }
   .marginBox {
      width: 150px;
      background-color: #FF9A8B;
      text-align: center;
      padding: 10px;
   }
</style>
</head>
<body>
<h1>margin-block-end 属性例子</h1>
<div id="customDIV">
<p>橙色 div 元素强调蓝色框周围的边距。</p>
   <div class="marginBox">box</div>
      <div class="marginDemo">
         margin-block-end 属性示例
      </div>
   <div class="marginBox">box</div>
</div>
</body>
</html>