CSS 边距

在HTML元素周围设置边距是CSS相对于传统的Web标记的一个优势。本文将教你CSS边距属性及其组成属性。

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提供了四个独立属性来设置元素的左、右、上和下的边距。

margin-bottom
margin-top
margin-left
margin-right

以下示例演示了如何在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}

这里的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 边距 – 设置三个值：

我们可以将边距设置为三个值，如下所示 margin: 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边距 – 设置两个值：

我们可以将边距设置为两个值 margin: 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>

我们已经看到，为margin设置一个单一的值会将margin等量地应用到所有的边界 – 顶端、右侧、底部和左侧。您可以查看第一个例子来理解这个情况。

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边距 – 相关属性

属性	描述
margin	用于一次性设置所有margin属性的简写属性
margin-bottom	设置元素的下边距
margin-left	设置元素的左边距
margin-right	设置元素的右边距
margin-top	设置元素的上边距
margin-trim	允许容器修剪其子元素的边距