CSS - margin-left 属性

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

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

可能的值

以下列表包含margin-left 属性的所有可能值。

<length> - 边距大小的固定值。
<percentage> - 相对于包含块的内联大小测量的边距百分比，或者在水平语言中书写模式定义的宽度。
auto - 将可用水平空间的百分比分配给左边距，所选的布局选项起着至关重要的作用。

margin-left 和
margin-right
的值相等，当两者都设置为auto时。

应用于

所有元素，除了具有表格display类型（除了table-caption、table和inline-table）的元素。它也应用于::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">
      The left margin is 30px.
   </p>
   
   <p class="margin-perc">
      The left margin is 10%.
   </p>
   
   <p class="margin-em">
      The left margin is 3em.
   </p>
   
   <p class="margin-auto">
      The left margin will be set by the browser.
   </p>
   
   <p class="margin-neg">
      The left margin is -10px.
   </p>
</body>
</html>

inherit - 当您希望子元素的左边距与其父元素的左边距匹配时，使用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 property - inherit</h3> 
   <p>The margin-left is 20% for parent element.</p>
   <p class="example">A child element where the left margin is inherited from the parent (p) and is 20%.</p>
</body>
</html>

打印页面