留白不是“什么也不写”，而是用margin和padding主动控制盒模型的呼吸感；硬塞空div或table是倒退做法，现代页面99%的留白需求靠这两个属性即可干净解决。
留白不是“什么也不写”，而是用 margin 和 padding 主动控制盒模型的呼吸感。硬塞空 、空 div 或 table 是倒退做法，现代页面里 99% 的留白需求靠这两个属性就能干净解决。
为什么直接写 margin 和 padding 就够了
浏览器渲染时，每个元素默认是“盒子”，margin 控制它和邻居的距离，padding 控制内容和自己边框的距离。两者叠加，就能精确决定视觉节奏——比如标题下留多高、卡片内文字离边多远、段落之间是否紧凑。
- 用
margin-bottom分隔模块（如h2后跟p），比在中间插空div更语义清晰、更易维护 -
padding加在容器上（如.card），比给每个子元素单独设margin更稳定，避免外边距塌陷问题 - 固定像素值（如
16px）适合小范围微调；响应式场景优先用rem或em，随字体缩放自然变化
margin 常见踩坑：外边距合并（margin collapse）
相邻两个块级元素都设了 margin-top 和 margin-bottom，实际间距往往不是相加，而是取较大者。比如 h2 { margin-bottom: 24px; } + p { margin-top: 16px; }，最终只显示 24px 空隙。
- 这不是 bug，是 CSS 规范行为，但容易误判为“样式没生效”
- 想强制叠加？把其中一个元素设为
display: inline-block或给父容器加display: flow-root - 更稳妥的做法：只用单向 margin，比如统一用
margin-bottom控制所有块级元素的下间距，不碰margin-top
响应式侧边留白别写死 margin-left/right
直接给 body 或 .wrapper 设 margin: 0 300px，在手机上会水平溢出，触发滚动条——这不是留白，是布局错误。
立即学习“前端免费学习笔记（深入）”；
- 正确姿势：用
max-width+margin: 0 auto，比如.wrapper { max-width: 1200px; margin: 0 auto; width: 100%; } - 这样大屏有留白，小屏自动填满，不依赖媒体查询也能 work
- 若需移动端进一步收紧，再加媒体查询重置
max-width，例如@media (max-width: 480px) { .wrapper { max-width: 100%; } }
图片下方那条“看不见的留白”怎么消
行内图片（img）默认按 baseline 对齐，而 baseline 下方本就预留 descender 空间（给 g、j、y 这类字母），所以图片底下总有一条缝——这不是 margin，是 line box 的天然高度。
- 最简解法：
img { display: block; }，让图片脱离行内流，vertical-align失效 - 保留行内特性？改对齐方式：
img { vertical-align: top; }或middle - 如果父容器有
line-height，且你无法改，可临时设line-height: 0;或font-size: 0;消除影响
留白的关键不在“加多少”，而在“加在哪”。同一个 24px，用在 margin-bottom 是模块分隔，用在 padding 是内容呼吸，用在 text-underline-offset 是文字细节——选错位置，再多数值也救不回节奏感。
