这是您的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 上关注我
里多伊·哈桑
