应重置 body 的 margin 和 padding 以控制页面留白：设 margin 清除外边距并推离视口，设 padding 在内容区内部留白；避免通配符重置影响表单和标题；配合 box-sizing: border-box 防止宽度溢出，并确保 viewport 标签正确设置。
直接用 body 的 margin 和 padding 控制整体留白
网页默认的 body 元素自带浏览器预设的外边距（通常是 8px），这会导致内容紧贴视口边缘。想统一控制整个页面的内外边距，最直接有效的方式就是重置 body 的 margin 和 padding。
- 把
body { margin: 0; padding: 0; }放在<style></style>标签或外部 CSS 中，能立刻消除默认空白 - 若想让内容离视口边缘保持 20px，可设
body { margin: 20px; padding: 0; }；注意此时是「外边距」，会把整个 body 推离视口边界 - 若想内容区域内部有留白（比如文字不贴着左右边缘），应设
body { margin: 0; padding: 20px; }—— 这才是真正的“内边距”效果 - 别只写
margin: 20px就以为万事大吉：它等价于margin: 20px 20px 20px 20px，但上下左右值不同时，必须显式写全，比如margin: 10px 20px 30px 40px
用 * 通配符重置所有元素的 margin/padding 要谨慎
有人习惯加一句 * { margin: 0; padding: 0; } 来“清空一切”，但这不是好主意。
-
input、button、textarea等表单控件依赖默认margin和padding实现可点击区域和视觉对齐，全清掉后容易变小、错位甚至无法点击 -
h1~h6的默认上下边距被清掉后，标题会和其他段落挤在一起，阅读节奏全乱 - 更稳妥的做法是只重置容器级元素：
body, div, section, article, header, footer, main { margin: 0; padding: 0; }，保留语义化元素的默认行为
用 box-sizing: border-box 避免 padding 导致宽度溢出
当你给某个 div 设了 width: 100%; padding: 20px;，它的实际占用宽度会变成 100% + 40px（左右 padding 各 20px），可能撑破父容器甚至出现横向滚动条。
- 在
body或全局样式开头加上* { box-sizing: border-box; }，能让所有元素的width和height包含padding和border，不再“额外加宽” - 这个声明本身不影响
margin，外边距依然在盒模型外部计算，所以不用担心布局塌陷 - 注意 IE8+ 才支持
box-sizing，但现代项目基本不用考虑兼容性问题
移动端要注意 viewport 设置是否影响实际留白
即使你写了 body { padding: 20px; }，在手机上可能发现左右还是紧贴屏幕——大概率是因为没加 viewport meta 标签，导致页面被缩放渲染，CSS 像素和设备像素没对齐。
- 确保
里有：<meta name="viewport" content="width=device-width, initial-scale=1"> - 否则，iOS Safari 可能按 980px 宽度渲染页面，你写的
padding: 20px会被等比压缩，视觉上几乎看不出来 - 这个 meta 标签不解决 margin/padding 本身的问题，但它决定了你写的那些数值能否按预期生效
实际项目中，body 的 margin 和 padding 经常被忽略，但恰恰是它们最先决定用户看到的第一眼留白。真正要调的不是每个子元素，而是从根部开始理清盒模型和渲染上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
