margin作用于边框之外控制元素间距离，padding作用于边框之内调整内容与边框间距；盒子模型顺序为content→padding→border→margin；padding影响自身尺寸并延伸背景，margin不影响尺寸且透明；相邻块级元素垂直margin会合并，padding永不合并；按钮内边距用padding，元素间距用margin，水平居中必须用margin:0 auto；box-sizing:border-box使padding和border计入宽高，避免布局错乱。
margin 和 padding 的作用位置完全不同
别被“都是边距”骗了——margin 是元素**边框之外**的透明空隙，控制它和邻居的距离；padding 是边框**之内**的内容缓冲区，决定文字、图片离边框有多远。盒子模型从内到外就是：content → padding → border → margin。
- 给
div加padding: 20px，背景色会延伸到这 20px 区域；加margin: 20px，那 20px 是完全透明的，透出父容器甚至 body 的背景 -
padding会让元素“变胖变高”（标准盒模型下），margin不影响自身尺寸，只推走别人 - 两个相邻块级元素的
margin-top和margin-bottom会合并（collapse），取较大值；padding永远不合并
什么时候该用 padding，什么时候必须用 margin
选错会导致布局错乱、背景断裂或居中失效。核心判断依据就一条：你要调整的是“内容与边框的距离”，还是“这个盒子与其他盒子的距离”。
- 按钮文字太贴边？用
padding—— 它扩大点击热区且背景自然覆盖 - 两个卡片之间要留空？用
margin—— 避免把卡片本身撑大，也防止父容器被意外撑开 - 想让块级元素水平居中？必须用
margin: 0 auto——padding对居中无效 - 清除默认间距（比如
p标签自带的上下边距）？改margin，不是padding
box-sizing: border-box 是绕不开的兼容前提
默认的 box-sizing: content-box 下，width: 200px; padding: 15px; 实际宽度是 230px，极易导致响应式断层。几乎所有现代项目都应全局重置：
*, *::before, *::after {
box-sizing: border-box;
}
- 启用后，
padding和border被“压缩”进设定的宽高内，width: 200px就真是 200px -
margin不受box-sizing影响，始终在外部起作用 - 不设
border-box时，用padding做间距容易引发父容器 overflow 或高度塌陷
常见误用场景和调试线索
遇到布局异常，先盯住这两点：
- 背景色/图突然“断了一截”？大概率是误用
margin替代padding，导致背景没覆盖到内容边缘 - 两个 div 看起来只有 10px 间距，但各自写了
margin-bottom: 15px和margin-top: 15px？这是 margin 合并，实际只生效 15px - 给行内元素（如
span）设margin-top/bottom没反应？行内元素垂直方向margin无效，得用padding或改成display: inline-block - 负
margin可以拉近元素（比如实现文字上浮），但负padding是非法的，浏览器直接忽略
真正卡住人的往往不是概念，而是“明明写了 margin 却没推开”或者“padding 加了但背景没延展”——这时候翻一翻 computed styles，看一眼 background-origin 和 box-sizing，比重写三遍 CSS 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
