CSS - 边距

在 HTML 元素周围设置边距是将 CSS 置于传统 Web 标记之上的原因之一。本文将教你CSS margin属性及其构成属性。

CSS 边距

CSS margin属性是一个简写属性，用于设置 HTML 元素周围的边距区域。假设您想在 h1 元素上设置四分之一英寸的边距，则语法如下：

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 0.25in; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has  quarter-inch margin around it!</h1>
   </div>
</body>
</html>

您可以使用任何单位设置边距，无论是像素、英寸、毫米还是 em。边距的默认值为 0（零），因此如果您不设置边距值，则元素周围不应出现边距。要设置 h1 元素周围 20 像素的边距，上面的代码将编写如下：

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has 20 pixels margin around it!</h1>
   </div>
</body>
</html>

CSS 边距 - 单面属性

CSS 提供了四个单独的属性来设置元素的左、右、上、下边距。

边距底部
顶部边距
左边距
右边距

以下示例演示了如何在 h1 元素周围设置不同的边距：

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin-top: 20px; margin-right:40px; margin-bottom:10px;
      margin-left:0px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has different margins around it!</h1>
   </div>
</body>

CSS 边距 - 速记属性

您可以使用margin属性将所有边边距设置为不同的值。以下是使用 margin 作为简写属性的语法：

h1 {margin: top right bottom left}

这里的上、右、下、左的值可以是像素、英寸、ems或厘米等。所以使用上面的语法我们可以编写我们之前的HTML代码如下：

<html>
<head>
<style>
   div{
      border:1px dotted
   }
   h1 {
      margin: 20px 40px 10px 0px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has different margins around it!</h1>
   </div>
</body>

CSS 边距 - 设置三个值：

我们可以将边距设置为三个值：边距 20px 40px 10px，在这种情况下，上边距为 20px，左右边距为 40px，下边距为 10px。以下是示例。您应该尝试将输出与前面的示例进行比较：

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px 40px 10px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>This h1 element has different margins around it!</h1>
   </div>
</body>

CSS 边距 - 设置两个值：

我们可以将边距设置为两个值：边距 20px 40px，在这种情况下，顶部和底部边距将为 20px，左右边距将为 40px。以下是示例。您应该尝试将输出与前面的示例进行比较：

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px 40px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with grey background!</h1>
   </div>
</body>

我们已经看到，为边距设置单个值，会将边距均匀地应用于所有边 - 顶部、右侧、底部和左侧。您可以查看第一个示例来理解这种情况。

CSS 边距 - 混合单位：

CSS 允许混合使用的长度值类型，同时在速记属性中指定不同的边距。您不限于在给定规则中使用单一长度类型，如下所示：

<html>
<head>
<style>
   div{
      border:1px dotted
   }
   h1 {
      margin: 20px 5em .5in 4ex; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with grey background!</h1>
   </div>
</body>

CSS 负边距

CSS 允许为元素指定负边距。这将导致元素的框伸出其父元素或与其他元素重叠。

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   h1 {
      margin: 20px 40px; background-color: #eee;
   }
   p {
      margin: -20px 40px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with grey background!</h1>
      <p>This paragraph has negative margin.</p>
   </div>
</body>
</html>

CSS 边距 - 百分比

很可能为元素的边距设置百分比值。边距百分比值是根据父元素内容区域的宽度计算的，因此如果父元素的宽度发生变化，它们也会发生变化。

<html>
<head>
<style>
   h1 {
      margin:10%; background-color: #eee;
   }
</style>
</head>
<body>
   <div style="width: 600px; border: 1px dotted;">
      <h1>An h1 element with grey background!</h1>
   </div>

   <div style="width: 400px; border: 1px dotted;">
      <h1>An h1 element with grey background!</h1>
   </div>;
</body>
</html>

CSS 边距 - 内联元素

边距也可以应用于内联元素，但顶部和底部边距对这些非替换元素的行高没有任何影响，并且这些边距始终是透明的。但是，当您将边距应用于内联非替换元素的左侧和右侧时，它将显示如下示例所示的效果。

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   strong {
      margin-top: 25px; margin-bottom: 50px; 
      margin-left: 25px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
       <p>This text has some <strong>strong text</strong> with grey background</p>
   </div>

</body>
</html>

这里，margin-left在突出显示的强文本之前创建了一些额外的空间。我们可以在元素前后创建相同的空间，如下所示：

<html>
<head>
<style>
   div {
      border:1px dotted
   }
   strong {
     margin: 25px; background-color: #eee;
   }
</style>
</head>
<body>
   <div>
       <p>This text has some <strong>strong text</strong> with grey background</p>
   </div>

</body>
</html>

CSS 边距 - 自动值

为了使元素在其父元素中居中，请使用margin: 0 auto，如下例所示：

<html>
<head>
<style>
   div {
      width:600px; border:1px dotted
   }
   h1 {
      margin:0 auto;
   }
</style>
</head>
<body>
   <div>
        <h1>An h1 element with center position!</h1>
   </div>

</body>
</html>

不过，如果您使用的是旧浏览器，则上面的代码将不起作用，而对于现代浏览器，您应该使用以下代码：

<html>
<head>
<style>
   div {
      width:600px; border:1px dotted
   }
   h1 { 
      display: flex; justify-content:center;
   }
</style>
</head>
<body>
   <div>
      <h1>An h1 element with center position!</h1>
   </div>

</body>
</html>

CSS 边距 - 相关属性

财产	描述
利润	用于在一个声明中设置所有边距属性的简写属性
边距底部	设置元素的下边距
左边距	设置元素的左边距
右边距	设置元素的右边距
顶部边距	设置元素的上边距
边距修剪	允许容器修剪其子容器的边距