在 CSS 中，margin 是用于控制元素周围外部空间的属性，属于盒模型的一部分。以下是关键点解析：

核心作用

语法与取值

1. 基础语法：

css

margin: 所有方向的值; / 统一设置 /

margin: 上下 左右; / 上下相同，左右相同 /

margin: 上 左右 下; / 上、左右、下 /

margin: 上 右 下 左; / 顺时针：上、右、下、左 /

示例：

css

margin: 10px; / 四周均为10px /

margin: 5% 20px; / 上下5%，左右20px /

margin: 10px 0 15px; / 上10px，左右0，下15px /

margin: 5px 10px 15px 20px; / 上5px，右10px，下15px，左20px /

2. 单边设置：

css

margin-top, margin-right, margin-bottom, margin-left

3. 特殊值：

css

margin: 0 auto; / 上下0，左右居中（需指定元素宽度） /

css

margin-left: -20px; / 向左偏移20px /

关键特性

1. 外边距合并（Margin Collapse）：

2. 百分比计算：

3. 行内元素限制：

应用场景

1. 元素间距控制：

css

box { margin-bottom: 20px; } / 为下方元素预留空间 /

2. 水平居中：

css

centered {

width: 80%;

margin: 0 auto; / 左右自动分配剩余空间 /

3. 布局调整：

css

pull-left { margin-right: 10px; } / 右侧留空，避免元素紧贴 /

overlap { margin-left: -50px; } / 向左覆盖其他内容 /

注意事项

掌握 `margin` 的使用能有效控制页面元素的布局与间距，是 CSS 排版的核心技能之一。