CSS - margin 属性

CSS margin 属性用于在元素周围创建空间，位于其边框之外。它是一个简写属性，用于在一个语句中定义以下属性的值：margin-top，margin-right，margin-bottom 和 margin-left。

语法

margin: auto | length | percentage | initial | inherit;

属性值

值	描述
auto	浏览器会自动设置所有四个边框的边距。
长度	使用长度单位（例如 px、em、rem 等）设置边距的宽度。
百分比	使用百分比值（例如 10%）相对于包含元素设置边距的宽度。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Margin 属性示例

以下示例说明了具有不同值的margin 属性。

使用 Auto 值的 Margin 属性

要允许浏览器自动计算边框的边距，我们使用auto 值。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         background-color: lightblue;
         padding: 10px;
         margin: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <h4>
      margin: auto
   </h4>
   <p>
      TutorialsPoint is an online educational platform 
      offering a wide range of resources and tutorials 
      for learners at various levels. It provides 
      comprehensive, self-paced learning materials 
      across numerous subjects, including programming, 
      web development, data science, and many other 
      technical and non-technical fields.
   </p>

</body>

</html>

使用长度值的 Margin 属性

要设置边框的边距，我们可以使用长度单位（例如 px、em、rem 等）指定边距的宽度。它最多接受四个值。根据提供的数值数量，相应的边框将受到影响。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2f2f2;
         padding: 10px;
      }

      p {
         background-color: lightblue;
         padding: 10px;
      }

      .one {
         margin: 10px;
      }

      .two {
         margin: 10px 25px;
      }

      .three {
         margin: 10px 15px 30px;
      }

      .four {
         margin: 10px 15px 30px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <div class="container">
      <h4>
         margin: 10px (applied to all four borders)
      </h4>
      <p class="one">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 25px (10px applied to top and 
         bottom borders, 25px applied to left and 
         right borders)
      </h4>
      <p class="two">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 15px 30px (10px applied to 
         top border, 15px applied to left and right 
         borders, 30px applied to bottom border)
      </h4>
      <p class="three">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 15px 30px 45px (10px applied to 
         top border, 15px applied to right border, 45px 
         applied to bottom border and 45px applied to 
         left border)
      </h4>
      <p class="four">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
   </div>
</body>

</html>

使用百分比值的 Margin 属性

要设置边框的边距，我们可以使用百分比值（例如，相对于包含元素大小的 10%）指定边距的宽度。它最多接受四个值。根据提供的数值数量，相应的边框将受到影响。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2f2f2;
         padding: 10px;
      }

      p {
         background-color: lightgreen;
         padding: 10px;
      }

      .one {
         margin: 6%;
      }

      .two {
         margin: 6% 4%;
      }

      .three {
         margin: 6% 8% 5%;
      }

      .four {
         margin: 6% 5% 7% 8%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <div class="container">
      <h4>
         margin: 6% (applied to all four borders)
      </h4>
      <p class="one">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 4% (6% applied to top and bottom 
         borders, 4% applied to left and right borders)
      </h4>
      <p class="two">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 8% 5% (6% applied to top border, 
         8% applied to left and right borders, 5% 
         applied to bottom border)
      </h4>
      <p class="three">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 5% 7% 8% (6% applied to top border, 
         5% applied to right border, 7% applied to 
         bottom border and 8% applied to left border)
      </h4>
      <p class="four">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
   </div>
</body>

</html>

注意：margin 属性最多接受四个值，因此根据指定的值的数量，相应的边框将受到影响。

一个值：如果给出一个值，则相同的边距宽度将应用于所有四个边框。
两个值：如果给出两个值，则第一个值设置顶部和底部边距宽度，第二个值设置左侧和右侧边距宽度。
三个值：如果给出三个值，则第一个值设置顶部边距宽度，第二个值设置右侧和左侧边距宽度，第三个值设置底部边距宽度。
四个值：如果给出四个值，则第一个值设置顶部边距宽度，第二个值设置右侧边距宽度，第三个值设置底部边距宽度，第四个值设置左侧边距宽度。

支持的浏览器

属性
margin	1.0	6.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面