CSS 边距 – 元素周围的间距

这是您的css：从基础到辉煌系列的下一篇文章：

第 10 讲：css 边距 – 元素周围的间距

在本次讲座中，我们将深入研究 css 边距，它控制 html 元素周围的空间。页边距在确定网页上元素的布局和位置方面发挥着至关重要的作用，确保元素不重叠并具有适当的间距。

1.什么是边距？

边距定义元素边框外部的空间。它们可用于将元素彼此推开或在它们之间创建空间。

基本语法：

element {
    margin: value;
}

该值可以采用 像素 (px)、百分比 (%) 或 自动。

立即学习“前端免费学习笔记（深入）”；

2.为所有边设置边距

设置元素各边边距的最简单方法是使用 margin 属性。

示例：

.box {
    margin: 20px; /* 20px margin on all sides */
}

这将在元素周围添加 20 像素的空间。

3.每边单独的边距

您还可以为元素的每一侧单独设置边距：

• 边缘顶部
• 右边距
• 边缘底部
• 左边距

示例：

.box {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 5px;
}

这允许您自定义每边的边距，为布局设计提供更大的灵活性。

4.边距的简写属性

margin 属性还接受最多四个值以速记形式定义每条边的边距。

示例：

.box {
    margin: 10px 20px 15px 5px;
}

• 上边距：10px
• 右边距：20px
• 下边距：15px
• 左边距：5px

如果您只指定两个值，第一个值将应用于顶部和底部，第二个值将应用于左侧和右侧。

示例：

.box {
    margin: 10px 20px; /* top/bottom: 10px, left/right: 20px */
}

5.带边距自动居中：auto

使用 margin: auto 是一种将元素水平居中的简单方法，通常与具有固定宽度的块元素（如 div）一起使用。

示例：

.centered-box {
    width: 300px;
    margin: 0 auto; /* horizontally centers the element */
}

这将使盒子在其容器内居中。

6.负边距

css 允许负边距值，这可以将元素拉得更近，甚至重叠。

示例：

.overlap-box {
    margin-top: -10px; /* pulls the element upwards by 10px */
}

使用负边距时要小心，因为它们可能会造成意外的重叠或布局问题。

7.利润崩溃

当两个带有边距的块级元素彼此相邻放置时，它们的垂直边距可能会“塌陷”为一个。使用两个边距中较大的一个，而不是将两者相加。

示例：

<div class="box-1"></div>
<div class="box-2"></div>

.box-1 {
    margin-bottom: 20px;
}

.box-2 {
    margin-top: 30px;
}

在这种情况下，由于边距折叠，两个框之间的边距将为 30px，而不是 50px。

结论

边距对于在元素周围创建空间和控制布局流程至关重要。无论您是使元素居中、调整间距，还是重叠元素，了解如何有效使用边距将使您更好地控制您的设计。

在 linkedin 上关注我

里多伊·哈桑