CSS 边距

在本教程中，您将学习如何使用 CSS 调整元素周围的空间。

CSS 边距属性

CSS 边距属性允许您设置元素框的边框（或元素框的边缘，如果它没有定义的边框）周围的间距。

元素的边距不受其 background-color 的影响，它始终是透明的 . 但是，如果父元素具有背景颜色，它将通过其边距区域可见。

为各个边设置边距

您可以分别使用 CSS margin-top, margin-right, margin-bottom 和 margin-left 属性为元素的各个边指定边距，例如顶部、右侧、底部和左侧。 让我们试试下面的例子来了解它是如何工作的：

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

可以使用以下值指定边距属性：

• length - 以 px、em、rem、pt、cm 等为单位指定边距。
• % - 指定包含元素宽度的百分比 (%) 边距。
• auto - 浏览器计算一个合适的边距来使用。
• inherit - 指定边距应该从父元素继承。

您还可以在元素上指定负边距，例如 margin: -10px;、margin: -5%; 等。

边距速记属性

margin 属性是一个简写属性，避免单独设置每一边的边距，即margin-top, margin-right, margin-bottom and margin-left。

让我们看一下以下示例，以了解其基本工作原理：

h1 {
    margin: 50px; /* apply to all four sides */
}
p {
    margin: 25px 75px; /* vertical | horizontal */
}
div {
    margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
    margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}

这种速记符号可以采用一个、两个、三个或四个空格分隔的值。

• 如果指定了一个值，它将应用于所有四个边。
• 如果指定了两个值，则第一个值应用于顶部和底部，第二个值应用于左右 元素框的一侧。
• 如果指定了三个值，则第一个值应用于顶部，第二个值应用于左右侧，最后一个值应用于底部。
• 如果指定了四个值，它们将分别按指定顺序应用于元素框的顶部、右侧、底部和左侧。

建议使用速记属性，它可以帮助您避免额外的输入，从而节省一些时间，并使您的 CSS 代码更易于遵循和维护。

带自动边距的水平居中

边距属性的 auto 值告诉 Web 浏览器自动计算边距。 这通常用于在较大容器中水平居中元素。

让我们试试下面的例子来了解它是如何工作的：

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

上述样式规则让 <div> 元素占据所有可用水平空间的 300 像素，剩余空间将在左右边距之间平均分配。