CSS 边距 – 元素周围的间距

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《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 上关注我

里多伊·哈桑

终于介绍完啦！小伙伴们，这篇关于《CSS 边距 – 元素周围的间距》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！