6.1四层解剖图：margin / border / padding / content
由外到内：外边距（隔别人的距离）→ 边框 → 内边距（隔自己内容的距离）→ 内容。
MARGIN 外边距
BORDER 边框 4px
PADDING 内边距
CONTENT 内容
.layers .m {
padding: 14px; /* margin 区 */
background: #E4DCEC;
}
.layers .b {
border: 4px solid #C99A4B; /* 边框 */
background: #F6E3C8;
}
.layers .p {
padding: 12px; /* padding 区 */
background: #D9E4D2;
}
.layers .c {
background: #FFFDF8; /* 内容区 */
}类比快递箱：内容是货物，padding是泡沫填充，border是箱板，margin是货架之间留的过道。
6.2盒子到底多宽？两种算法打架
同样 width:200px + padding 20 + border 5：默认算法 250px，border-box 只要 200px。
content-box：200 + 20×2 + 5×2 = 250px
border-box：padding/border 向内挤 → 200px
两块都设了 width:200px，但实际宽度不同——这就是「盒子怎么算」的问题。
/* 默认：width 只管内容区 */
.cb {
box-sizing: content-box; /* 默认值 */
width: 200px; padding: 20px;
border: 5px solid transparent;
}
/* 推荐：width = 整个盒子 */
.bb {
box-sizing: border-box;
width: 200px; padding: 20px;
border: 5px solid transparent;
}
/* 现代项目标配：全站改用 border-box */
*, *::before, *::after {
box-sizing: border-box;
}border-box 让「写的多少就是多少」，三栏布局对不齐多半是两种算法混用了。本项目 demo.css 第一行 * 就设置了它。
6.3margin 四个方向与简写
顺时针口诀「上右下左」；一个值 = 四周；两个值 = 上下 / 左右；三个值 = 上 / 左右 / 下。
margin: 30px 0（上下各让 30px）
margin: 0（四周紧贴）
/* 完整写法：上 右 下 左（顺时针） */
.box { margin: 10px 20px 30px 40px; }
/* 三个值：上 | 左右 | 下 */
.box { margin: 10px 20px 30px; }
/* 两个值：上下 | 左右 —— 最常用 */
.gap30 { margin: 30px 0; }
/* 一个值：四周 */
.box { margin: 0; }
/* padding 简写规则完全相同；
margin: 0 auto = 水平居中 */顺时针背下来：12 → 12/上下 34/左右 → 1/上 23/左右 4/下 → 1234，四档简写覆盖 90% 场景。
6.4margin 合并：上下 margin 会「叠」不「加」经典陷阱
两个盒子的上下 margin 相邻时取较大者，不是相加——30px + 30px 结果只有 30px。
下 margin: 30px
上 margin: 30px
两条 30px 相遇 → 间距是 30px 而不是 60px（取较大值）。
.box1 { margin-bottom: 30px; }
.box2 { margin-top: 30px; }
/* 相邻垂直 margin 合并：
实际间距 = max(30px, 30px)
= 30px，不是 60px！
/* 规避方法（任选）：
① 只用 margin-bottom 单方向
② 中间隔一层（padding 隔开）
③ 用 Flex/Grid 的 gap（第8章） */左右 margin 不会合并，只有上下（垂直方向）合并——因为 CSS 最初是给「文档流」设计的。
6.5负 margin：把盒子「拉」出界
margin 为负 = 向反方向拉。卡片叠边框、微调对齐全靠它。
参照线（wrap 内边距 12px）
margin-left: -6px → 我向左探出了 6px
margin-right: 20px → 右侧留白正常
margin-right: 20px → 右侧留白正常
负值让它「越界」，正负配合可以做卡片描边、盖章、局部出血排版。
.card {
margin-left: -6px; /* 向左拉出 */
margin-right: 20px; /* 正常留白 */
}
/* 常见用途：
① 卡片 hover 时 margin-top:-2px 微浮
② 全宽图嵌入有 max-width 的正文栏
③ 圣杯布局（配合 float，老派） */负 margin 不算 hack，是标准特性——但「大幅布局」交给 Flex/Grid，负 margin 只做细节微调。