应优先用容器元素的 padding 控制内容边距，而非重置 body 的 margin；推荐用 .container 包裹内容并设响应式 padding，配合 box-sizing: border-box 和 viewport 元标签确保移动端正常显示。
直接修改 body 的 margin 会生效，但不推荐
浏览器默认给 body 加了 8px 外边距（不同浏览器可能略有差异），所以页面内容四周总有一圈空白。你可以在 CSS 里写 body { margin: 0; } 去掉它——这确实能“清空边距”，但实际项目中往往需要的是可控的内边距，而不是粗暴归零。
常见错误现象：body { margin: 0; } 后发现文字紧贴浏览器边缘、按钮被切掉、响应式布局错位——因为后续所有基于 body 宽度的计算（比如 width: 100%;）都失去了安全余量。
- 真正该控制的是内容容器的内边距，不是
body的外边距 - 如果只是想让内容“离边远一点”，优先用
padding而非margin - 移动端尤其要注意：部分 iOS Safari 在
body { margin: 0; }后会触发意外的滚动条或视口偏移
用 container 类包裹内容并设 padding
这是最稳妥、最易维护的做法。在 index.html 的 <body> 内部加一层包裹元素，比如：
<body>
<div class="container">
<h1>标题</h1>
<p>正文内容</p>
</div>
</body>然后在 <style> 或外部 CSS 中定义：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.container {
padding: 20px;
}
/* 或者响应式写法 */
.container {
padding: 16px;
}
@media (min-width: 768px) {
.container {
padding: 24px 32px;
}
}-
padding不影响文档流宽度计算，不会破坏 flex/grid 布局行为 - 可单独控制上下左右：
padding: 16px 24px 20px 24px; - 若用 CSS 框架（如 Bootstrap），直接套
<div class="container">即可，它内部已预设了响应式padding和max-width
慎用 * { margin: 0; padding: 0; }
这个“重置全局边距”的写法看似省事，实则隐患很大。它会抹掉所有原生语义化标签的默认间距，比如：
-
h1到p的自然垂直间隔消失，文字糊成一团 -
ul/ol的缩进和列表符号位置错乱 -
button、input等表单控件的默认内边距归零，导致文字贴边、点击热区变小
更合理的做法是使用标准化方案，例如 normalize.css，或者只重置关键容器：
body,
h1, h2, h3, p, ul, ol, li, button, input, textarea {
margin: 0;
padding: 0;
}然后再逐个恢复需要的间距——这样既干净，又保留了语义层级。
移动端需额外注意 viewport 和 padding-inline
即使设置了 .container { padding: 16px; }，在 iPhone 等设备上仍可能看到左右溢出或横向滚动。原因常是：padding 加上内容宽度超出了视口。
- 确保
<head>中有正确的<meta name="viewport" content="width=device-width, initial-scale=1"> - 避免对容器设固定
width: 100vw;——它包含滚动条宽度，容易撑破 - 现代写法可用逻辑属性：
padding-inline: 16px;替代padding-left/padding-right，自动适配 RTL 语言 - 用
box-sizing: border-box;全局声明，防止padding导致宽度叠加
复杂点在于：边距不是孤立存在的，它和字体大小、行高、视口缩放、甚至用户系统设置（如“更大字体”辅助选项）都会联动。调试时别只盯着一个 padding 值改，先确认是否被其他层覆盖，再查 computed styles 是否真实生效。
