该用margin还是padding取决于空隙归属：margin用于元素与外部邻居间距，padding用于内容与自身边框间距；行内元素垂直margin无效，负margin是合法布局工具，相邻块级元素垂直margin会合并，padding百分比均以父宽为基准。

margin 和 padding 不是“设置间距”的万能开关，用错地方会引发布局塌陷、元素错位甚至样式失效。

什么时候该用 margin，什么时候必须用 padding

核心判断依据是：你要推远的是「自己和其他元素」，还是「自己内部的内容和边框」。

• margin 作用在元素的外边，控制它和邻居（上一个兄弟、下一个兄弟、父容器）之间的距离；常用于块级元素垂直对齐、居中、避免重叠
• padding 作用在元素的内边，撑开内容与边框之间的空隙；按钮文字不贴边、卡片内容留白、输入框文字有呼吸感，都靠它
• 如果对行内元素（如 <span></span>、<a></a>）设 margin-top 或 margin-bottom，基本没效果——浏览器会忽略，得先加 display: inline-block 或 display: block

margin 的负值不是 bug，是可控的布局工具

负 margin 常被当成“hack”，但它在真实项目里很实用，比如实现等高列、取消列表默认缩进、微调浮动元素位置。

anything-to-html

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

下载

• margin-left: -20px 可以让一个元素向左挤出父容器边界，配合 position: relative 实现视觉偏移
• 两个相邻块元素都设 margin-bottom: 20px，实际垂直间距不是 40px，而是 20px——这是 margin 合并（collapsing）行为，不是错误，但容易误判
• 想彻底避免合并？给父容器加 overflow: hidden、border 或 padding 都能触发 BFC，阻止子元素 margin 外溢

padding 设百分比时，基准是父容器宽度，不是高度

这是最常踩的坑：写 padding-top: 20%，结果发现高度远超预期，因为 CSS 规范规定，所有方向的 padding 百分比值，都以父元素的 width 为参照，哪怕你写的是 padding-top 或 padding-bottom。

• 要实现响应式正方形容器？可以用 padding-bottom: 100% + height: 0 + 绝对定位子元素
• padding 会增大元素总尺寸（除非用了 box-sizing: border-box），而 margin 不会——所以用 padding 做留白时，记得检查父容器是否还装得下
• 移动端小屏幕慎用大 padding 值，尤其 padding-left/padding-right，容易把内容挤出视口

真正难的不是记住语法，而是每次写 margin 或 padding 之前，先问一句：这个空隙，属于“我和别人之间”，还是“我身体里面”？答错一次，调试十分钟。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！