CSS - margin-top 属性

CSS margin-top 属性设置元素顶部外边距的宽度。

语法

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

属性值

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

CSS Margin Top 属性示例

以下示例说明了使用不同值的 margin-top 属性。

使用 Auto 值的 Margin Top 属性

要允许浏览器根据可用空间自动计算顶部外边距，我们使用 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      .dimensions {
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .box {
         background-color: lightblue;
         margin-top: auto;
      }

      .sample-box {
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-top property
   </h2>
   <h4>
      margin-top: auto;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box dimensions">
         This box has margin-top: auto
      </div>
      
      <div></div>
   </div>

</body>

</html>

使用长度值的 Margin Top 属性

要设置顶部外边距，我们可以使用长度单位（例如 px、em、rem 等）指定外边距大小。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      .dimensions {
         background-color: lightblue;
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .sample-box {
         background-color: lightgreen;
      }

      .box1 {
         margin-top: 40px;
      }

      .box2 {
         margin-top: 5em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-top property
   </h2>
   <h4>
      margin-top: 40px;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box1 dimensions">
         This box has margin-top: 40px
      </div>  
   </div>
   <h4>
      margin-top: 5em;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box2 dimensions">
         This box has margin-top: 5em
      </div>
   </div>

</body>

</html>

使用百分比值的 Margin Top 属性

要设置顶部外边距，我们可以使用百分比值（例如 10%（包含元素宽度的 10%））指定外边距大小。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

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

      .dimensions {
         background-color: lightblue;
         padding: 10px;
         border: 3px solid black;
         text-align: center;
         width: 50%;
      }

      .sample-box {
         background-color: lightgreen;
      }

      .box1 {
         margin-top: 4%;
      }

      .box2 {
         margin-top: 18%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-top property
   </h2>
   <h4>
      margin-top: 4%;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box1 dimensions">
         This box has margin-top: 4% of container width
      </div> 
   </div>
   <h4>
      margin-top: 18%;
   </h4>
   <div class="container">
      <div class="sample-box dimensions"> 
         sample box
      </div>
      <div class="box2 dimensions">
         This box has margin-top: 18% of container width
      </div>
   </div>

</body>

</html>

支持的浏览器

属性
margin-top	1.0	6.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面