CSS - margin-inline-start 属性

上一页
下一页

CSS margin-inline-start 属性设置元素的内联起始边的边距。 书写模式 和 方向 属性定义了内联方向。

语法

margin-inline-start: auto | length | percentage | initial | inherit;

属性值

值 描述
auto 浏览器自动设置内联起始边的边距。默认值。
length 使用长度单位（例如 px、em、rem 等）设置内联起始边的边距空间。允许使用负值。
percentage 使用百分比值（例如 10%）相对于包含元素的内联方向设置内联起始边的边距空间。
initial 将属性设置为其默认值。
inherit 从父元素继承属性。

CSS 内联起始边距属性示例

以下示例使用不同的值解释了margin-inline-start 属性。

使用 auto 值的内联起始边距属性

为了允许浏览器根据可用空间自动计算元素的内联起始边的边距，我们使用auto 值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 200px;
         padding: 20px;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .auto-box {
         background-color: lightblue;
         border: 3px solid blue;
         margin-inline-start: auto;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline-start property
   </h2>
   <h4>
      margin-inline-start: auto
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="auto-box props">
         This box has margin-inline-start: auto
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

使用长度值的内联起始边距属性

要设置元素的内联起始边的边距，我们可以使用长度单位（例如 px、em、rem 等）指定边距大小。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 200px;
         width: 490px;
         padding: 20px;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
      }

      .px-box {
         margin-inline-start: 20px;
      }

      .em-box {
         margin-inline-start: 2em;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline-start property
   </h2>
   <h4>
      margin-inline-start: 10px
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="px-box props center">
         This box has margin-inline-start: 10px 
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline-start: 2em
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="em-box props center">
         This box has margin-inline-start: 2em;
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

使用百分比值的内联起始边距属性

要设置元素的内联起始边的边距，我们可以使用百分比值（例如 10%（包含元素的宽度的 10%））指定边距大小。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 200px;
         width: 490px;
         padding: 20px;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
      }

      .example1 {
         margin-inline-start: 3%;
      }

      .example2 {
         margin-inline-start: 5%;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline-start property
   </h2>
   <h4>
      margin-inline-start: 3%
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="example1 props center">
         This box has margin-inline-start: 3% for 
         the inline-start edge of the width of 
         the container.
      </div>
      <div class="demo-box props"> 
      sample box
      </div>
   </div>
   <h4>
      margin-inline-start: 5%
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="example2 props center">
         This box has margin-inline-start: 5% for 
         the inline-start edge of the width of 
         the container.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

带方向的内联起始边距属性

margin-inline-start 属性可以与direction 属性结合使用，该属性确定文本和内联元素的水平方向。如果 direction 为 ltr，则inline-start 在左侧；如果 direction 为 rtl，则inline-start 在右侧。以下示例显示了这些情况。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 200px;
         width: 490px;
         padding: 20px;
      }

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
         margin-inline-start: 15px;
      }

      .demo-box {
         background-color: #04bf52;
      }

      .direction-rtl {
         direction: rtl;
      }

      .direction-ltr {
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline-start property
   </h2>
   <h4>
      margin-inline-start: 15px; direction: rtl
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="direction-rtl props center">
         This box has margin-inline-start: 15px for 
         inline-start edge with rtl direction.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline-start: 15px; direction: ltr
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="direction-ltr props center">
         This box has margin-inline-start: 15px for 
         inline-start edge with ltr direction.
      </div>
      <div class="demo-box props"> sample box</div>
   </div>
</body>

</html>

带书写模式的内联起始边距属性

margin-inline-start 属性可以与writing-mode 属性结合使用，该属性确定文档中文本流的方向和方向。例如，在垂直模式（如 vertical-rl）中，inline-start 为顶部。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 50%;
         width: 50%;
      }

      .container > div {
         writing-mode: vertical-rl;
         block-size: 100%;
         box-sizing: border-box;
      }

      .demo-box {
         background-color: #04bf52;
         inline-size: 20%;
      }

      .main-box {
         background-color: lightblue;
         inline-size: 50%;
         border: solid black 1px;
         margin-inline-start: 30px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline-start property
   </h2>
   <h4>
      margin-inline-start: 30px; 
      writing-mode: vertical-rl
   </h4>
   <div class="container">
      <div class="demo-box">
         sample box
      </div>
      <div class="main-box">
         <p>
            This box has margin-inline-start: 30px for 
            inline-start edge with writing-mode: vertical-rl;
         </p>
      </div>
      <div class="demo-box">
         sample box
      </div>
   </div>

</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
margin-inline-start 69.0 79.0 68.0 14.1 56.0
css_properties_reference.htm
打印页面
上一页
下一页
广告