温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！
CSS中的下外边距（margin-bottom）用于控制元素的下边框与下方元素之间的距离。下外边距可以为正值、负值或零值。正值表示元素与下方元素之间有一定的间隔，负值表示元素与下方元素之间有重叠的部分，零值表示元素与下方元素紧密相连。
下面是一个示例代码，展示了如何使用下外边距来控制元素之间的间距：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin-bottom: 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="681a-4766-b1a6-7be4 box"></div>
<div class="4766-b1a6-7be4-0034 box"></div>
<div class="b1a6-7be4-0034-2cb7 box"></div>
</body>
</html>
在这个示例中，我们创建了一个宽度为200px、高度为100px的盒子，并给它设置了一个下外边距为20px。由于我们在HTML中使用了三个具有相同类名的盒子，它们会按照顺序垂直排列，并且每个盒子之间都会有20px的间距。
如果我们将下外边距设置为负值，那么元素之间将会发生重叠。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin-bottom: -20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="0034-2cb7-1ceb-0c96 box"></div>
<div class="2cb7-1ceb-0c96-3a70 box"></div>
<div class="1ceb-0c96-3a70-fdd5 box"></div>
</body>
</html>
在这个示例中，我们将下外边距设置为-20px。结果是每个盒子的上边框与下方盒子的下边框发生重叠，它们之间没有间距。
需要注意的是，下外边距的重叠是CSS中一个重要的特性。当两个相邻的元素都设置了下外边距时，它们之间的间距将会取两个下外边距中的较大值。这种重叠现象在垂直排列的元素中特别常见。
除了下外边距，CSS还提供了上外边距（margin-top）、左外边距（margin-left）和右外边距（margin-right）来控制元素与上方、左侧和右侧元素之间的距离。这些外边距的使用方法与下外边距类似，只是作用的方向不同。
CSS中的下外边距用于控制元素与下方元素之间的距离。它可以为正值、负值或零值，分别表示间距、重叠和紧密相连。下外边距的重叠是CSS中一个重要的特性，需要注意。CSS还提供了其他方向的外边距来控制元素与其他方向元素之间的距离。
