理解 CSS 外边距（Margin）的概念及其在盒模型中的位置与作用。
掌握 margin 简写属性的四种取值规则（1 值、2 值、3 值、4 值）。
学会使用 margin: auto 实现块级元素的水平居中。
了解负外边距的用途及 inherit 关键字的继承机制。
能够灵活运用像素（px）、百分比（%）及相对单位（em, rem）设置外边距。
CSS 外边距（Margins）用于在元素边框（Border）外部创建空间，从而将该元素与页面上的其他元素分离开来。它是组织网页布局、防止内容过于拥挤的关键工具。
核心特点：
外部间距：控制元素外部的空白区域，不影响元素内部内容的布局。
灵活设置：可以统一设置四个方向，也可以单独针对上、右、下、左进行微调。
透明性：外边距区域是透明的，可以看到其下方的背景（通常是父元素或容器的背景）。
以下代码展示了一个简单的 20px 外边距应用：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
margin: 20px; /* 上下左右均为 20px */
border: 1px solid #ccc;
padding: 10px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box">
这个盒子四周拥有 20px 的外边距。
</div>
</body>
</html>代码解析：
margin: 20px; 为元素的四个方向（上、右、下、左）都应用了 20px 的间距。
这使得该 div 与其周围的元素保持了清晰的距离。
通用语法：
body {
margin: 值;
}CSS 允许使用多种单位来定义外边距的大小，以适应不同的设计需求。
CSS 提供了五个主要属性来控制外边距，其中 margin 是简写属性。
margin 属性非常强大，根据提供的值的数量不同，其行为也会发生变化。
当提供四个值时，顺序遵循顺时针方向：上 -> 右 -> 下 -> 左。
语法：
margin: 上 右 下 左;示例：
p {
margin: 40px 100px 120px 80px;
}解析：
上 (Top): 40px
右 (Right): 100px
下 (Bottom): 120px
左 (Left): 80px
当提供三个值时，第一个值用于上，第二个值用于左和右，第三个值用于下。
语法：
margin: 上 左右 下;示例：
p {
margin: 40px 100px 120px;
}解析：
上 (Top): 40px
左 & 右 (Left & Right): 100px
下 (Bottom): 120px
当提供两个值时，第一个值用于上和下，第二个值用于左和右。这是最常用的简写方式之一。
语法：
margin: 上下 左右;示例：
p {
margin: 40px 100px;
}解析：
上 & 下 (Top & Bottom): 40px
左 & 右 (Left & Right): 100px
当只提供一个值时，该值将应用于所有四个方向。
语法：
margin: 所有方向;示例：
p {
margin: 40px;
}解析：
上、右、下、左: 均为 40px
margin: auto 是块级元素水平居中的经典方法。浏览器会自动计算左右外边距，使元素在父容器中居中。
前提条件：
元素必须是块级元素（如 div, p）。
元素必须具有明确的宽度（width），否则宽度会自动填满父容器，导致 auto 无效。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto; /* 左右自动分配空间 */
width: 50%; /* 必须设置宽度 */
border: 1px solid black;
text-align: center;
background-color: #eef;
padding: 10px;
}
</style>
</head>
<body>
<div>使用 margin: auto 实现水平居中</div>
</body>
</html>inherit 关键字强制子元素继承父元素的外边距值。默认情况下，外边距不会自动继承，但使用此关键字可以改变这一行为。
示例：
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
margin: 20px;
border: 2px dashed blue;
}
.child {
margin: inherit; /* 继承父元素的 20px 外边距 */
border: 1px solid black;
background-color: #fff;
}
</style>
</head>
<body>
<div class="parent">
父元素
<div class="child">子元素继承了父元素的外边距 (20px)</div>
</div>
</body>
</html>盒模型位置：外边距位于边框之外，是透明的，用于隔离元素。
顺时针规则：记住 margin 四值顺序为 上 -> 右 -> 下 -> 左（时钟方向）。
居中技巧：margin: 0 auto 是实现块级元素水平居中的标准写法（需配合固定宽度）。
负值应用：负外边距可以实现元素重叠效果，常用于特殊的布局调整，但需谨慎使用以免破坏文档流。
单位选择：在响应式设计中，优先使用 rem 或 %，而在需要精确控制像素级对齐时使用 px。
如果我想让一个元素的上下外边距为 20px，左右外边距为 10px，应该如何使用简写属性 margin？
为什么在使用 margin: auto 进行水平居中时，必须给元素设置一个具体的 width？如果不设置会发生什么？
负外边距（例如 margin-left: -20px）通常用于解决什么布局问题？请设想一个应用场景。