留白需精准区分padding与margin：padding用于内容呼吸（如按钮内边距），margin用于元素分隔（如段落间距）；须重置默认样式、避免塌陷、响应式适配，并遵循“内容用padding、布局用margin”原则。
留白不是“多加点空隙”，而是用 margin 和 padding 控制视觉节奏——加错地方，页面反而显得松散或拥挤。
为什么直接写 margin: 20px 常常失效
浏览器对 body 默认有 margin: 8px，你写的 margin: 20px 实际叠加在默认值上；更麻烦的是，相邻块级元素的垂直 margin 会塌陷（比如两个 p 各设 margin-bottom: 12px，实际只显示 12px，不是 24px）。
- 先重置：在全局样式开头加
* { margin: 0; padding: 0; box-sizing: border-box; } - 别一上来就调
body的margin，它会影响整个文档流；优先给内容容器（如.wrapper）设padding - 小屏下固定像素留白（如
padding: 20px）容易撑出横向滚动条，改用clamp(12px, 3vw, 24px)或rem
padding 该用在哪，margin 又该用在哪
核心判断标准：padding 是“让内容呼吸”，margin 是“让元素分清彼此”。混用或错位，留白就失去控制力。
- 按钮、卡片、输入框这类有背景/边框的容器，用
padding让文字不贴边——它不改变外部布局位置 - 段落之间、标题与正文之间、卡片列表项之间，用
margin-bottom（而非margin-top）控制间距，再配合:last-child { margin-bottom: 0; }避免底部多余空白 - 行内元素（如
img、span）默认上下margin不生效，需先设display: block或vertical-align: top - 父容器用了
display: flex或display: grid，优先用gap，它不塌陷、不冲突、方向自动适配
响应式留白最容易被忽略的三个硬伤
留白在 375px 屏幕上看着舒服，不代表在 1920px 上也成立——真正难的是“稳”，不是“多”。
- 移动端点击区域必须 ≥ 44×44px，
padding值别用死px，改用0.8rem 1.2rem或min(16px, 4vw) - 给
body加了padding却没限制子容器宽度（如漏写max-width），小屏下内容会被挤出视口 -
viewportmeta 标签没放在最前面，所有基于视口的响应式留白（如vw、clamp()）都会错位
留白的质感，取决于你是否愿意为每个 margin 和 padding 想清楚：这是在推远什么？又是在撑开什么？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
