必须先重置浏览器默认值，因为几乎所有浏览器都给body预设margin: 8px等值，直接设margin: 20px会在默认基础上叠加；应先写body { margin: 0; padding: 0; }，再设所需边距。

直接调 body 的 margin 和 padding 就行，但必须先清掉浏览器默认值，否则你设的值可能被悄悄覆盖。

为什么刚写 margin: 20px 没反应？

因为几乎所有浏览器都给 body 预设了 margin: 8px（有的还带 padding）。你写的 margin: 20px 其实生效了，但它是在默认 8px 基础上叠加的——结果是 28px，不是你想要的“从视口边缘缩进 20px”。

• 第一步永远是重置：body { margin: 0; padding: 0; }
• 再设你需要的边距，比如 body { margin: 20px; } —— 这才是真·离边 20px
• 别用 * { margin: 0; padding: 0; } 一刀切，p、h1 等元素会因此失去自然间距，后期得手动补

margin 四值顺序怎么记才不乱？

顺序固定是「上 → 右 → 下 → 左」，和钟表走动方向一致（12点→3点→6点→9点）。写错顺序会导致上下左右全偏。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• margin: 10px → 四边都是 10px
• margin: 10px 20px → 上/下 10px，左/右 20px
• margin: 10px 20px 30px → 上 10px，左/右 20px，下 30px
• margin: 10px 20px 30px 40px → 上 10px，右 20px，下 30px，左 40px

想让内容区域内部有留白，该用 margin 还是 padding？

用 padding。很多人混淆这点：给 body 设 margin 是把整个页面“推离”视口；设 padding 才是让内容在 body 内部“呼吸”。

立即学习“前端免费学习笔记（深入）”；

• 要文字不贴着左右边缘？→ body { margin: 0; padding: 0 20px; }
• 要整页上下留空、左右撑满？→ body { margin: 30px 0; padding: 0; }
• 如果同时设 margin 和 padding，注意 body 的背景色只填满 padding 区域，margin 是透明的

真正容易被忽略的是：移动端 viewport 设置没配好时，margin 在小屏上可能被缩放或裁剪；还有，Flex 容器里的子元素（比如 select）的 margin-top 经常失效——这时得换 align-self 或改用 gap。