CSS 属性

margin-left 属性设置元素左侧边距的宽度。

正值会使元素远离相邻元素，而负值会使元素更靠近。

属性值

以下列表涵盖了 margin-left 属性的所有可能值。

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

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

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

    当 margin-left 和margin-right值都设置为 auto 时，它们之间的间距相等。

适用范围

所有元素，除了 table-caption、table 和 inline-table 以外的 table display 类型的元素。它也适用于 ::first-letter。

语法

margin-left = <length-percentage> | auto

CSS margin-left: 基本示例

这里是一个示例，其中可以传递给 margin-left CSS 属性的所有不同值:

<html>
<head>
<style>
   p {
      background-color: rgb(201, 238, 240);
      border: 1px solid black;
      width: fit-content;
   }

   .margin-px {
      margin-left: 30px;
   }

   .margin-perc {
      margin-left: 10%;
   }

   .margin-em {
      margin-left: 3em;
   }

   .margin-auto {
      margin-left: auto;
   }

   .margin-neg {
      margin-left: -10px;
   }
</style>
</head>
   
<body>
   <p class="margin-px">
      左边距为 30px.
   </p>
   
   <p class="margin-perc">
      左边距为 10%.
   </p>
   
   <p class="margin-em">
      左边距为 3em.
   </p>
   
   <p class="margin-auto">
      左边距将由浏览器设置。
   </p>
   
   <p class="margin-neg">
      左边距为 -10px.
   </p>
</body>
</html>

inherit: 当如果您希望子元素的左边距与其父元素的左边距相匹配，请使用继承属性。

注意:inherit 值只能在子元素上使用，而不能在父元素上使用。

CSS margin-left: 继承

这是一个子元素的 margin-left 继承自父元素的示例−

<html>
<head>
<style>
   .p {
      margin-left: 20%;
   }
   
   p.example {
      margin-left: inherit;
      border: 1px solid #4CAF50;
   }
</style>
</head>
<body>
<h3>margin-left 属性: inherit</h3> 
      <p>父元素的 margin-left 为 20%。</p>
    <p class="example">子元素，其左边距继承自父元素 (p)，且为 20%。</p>
</body>
</html>