CSSmargin和padding区别详解

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS margin和padding怎么区分？盒模型解析》，聊聊，希望可以帮助到正在努力赚钱的你。

CSS中padding是内容与边框间的内部空隙，影响元素尺寸且背景覆盖；margin是边框与外部元素间的外部空隙，不改变尺寸、透明且会合并。

先看盒子结构，定位“谁和谁之间”

每个HTML元素都是一个盒子，从里到外依次是：内容（content）→ 内边距（padding）→ 边框（border）→ 外边距（margin）。关键就看“空隙”在哪个位置：
• padding 是内容和边框之间的空隙，属于盒子“内部”；
• margin 是边框和隔壁元素（或父容器边界）之间的空隙，属于盒子“外部”。
记一句口诀：内距垫内容，外距推邻居。

看背景要不要延伸过去

这是最直观的区分方式：
• 如果你希望空白区域显示元素自身的背景色或背景图，就用 padding —— 它被背景完全覆盖；
• 如果空白区域必须透明、不能有背景（比如两个卡片之间留白，但各自背景不能连过去），就用 margin —— 它永远透明，不继承父级背景。

看是否影响自身尺寸和相邻布局

padding 会撑大元素的实际宽高（默认 content-box 模式下）；
margin 不改变自身尺寸，只影响它和别人的位置关系。
还要特别注意：
• 垂直方向上，相邻块级元素的 margin 会合并（比如 div1 的 margin-bottom=20px，div2 的 margin-top=15px，实际间距只有 20px）；
• padding 则不会合并，父子或兄弟间的 padding 都各自生效、累加。

按用途快速选对属性

遇到具体场景，直接对应选择：
• 给按钮文字留呼吸感，让文字离边框远一点 → padding
• 让两个栏目模块上下分开，互不粘连 → margin
• 实现块级元素水平居中 → margin: 0 auto（仅对设了 width 的块级元素有效）
• 清除段落、标题自带的默认间距 → 重置 margin（如 p, h1–h6, body）
• 希望响应式缩放时边距也等比变化 → 优先用 rem 或 % 单位设 padding/margin

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~