17370845950

盒模型可具象化为快递包裹：content是物品，padding是气泡纸，border是纸箱，margin是货架间隙；各部分位置与作用明确，devtools“剥洋葱”可直观验证。

盒模型不抽象，只是没拆开看。把一个盒子当成快递包裹来理解，content 是里面的东西，padding 是包裹里的气泡纸，border 是纸箱本身，margin 是箱子和货架之间的空隙——每个部分都有明确位置和作用。

content 决定“里面装什么”

content 是盒子最核心的部分，宽高由 width/height 直接控制（默认只包含内容区域）。比如 width: 200px 指的就是文字、图片等实际内容占的水平空间。注意：如果加了 padding 或 border，它不会自动“挤小” content，反而会让总尺寸变大（除非用 box-sizing: border-box）。

• 文字撑开 height 是常见现象，不是 bug，是 content 自然高度
• 设置 min-height 比固定 height 更灵活，尤其应对动态内容
• 空 div 默认高度为 0，因为 content 为空 —— 这能帮你确认是否真有内容渲染

padding 是“内边距”，影响背景和点击范围

padding 在 content 和 border 之间，是透明的“缓冲层”。关键点：padding 会撑大盒子，且背景色/图会延伸到 padding 区域；鼠标点击 padding 区域也算触发该元素事件。

• 单侧设置如 padding-left: 20px，适合图标+文字组合的留白
• 简写 padding: 10px 16px 表示上下 10px、左右 16px，比分别写四行更直观
• 不要靠 padding 实现整体间距，那是 margin 的活；混用容易算错总宽度

border 是“轮廓线”，有宽度、样式、颜色三要素

border 是 content + padding 的边界线。它占据真实空间，会影响元素总尺寸（尤其在 box-sizing: content-box 下）。虚线、双线、圆角都从这里开始控制。

• border: 1px solid #ccc 是最常用写法，缺一不可（否则不显示）
• 圆角 border-radius: 4px 作用在 border 外边缘，所以加了圆角后，border 也跟着弯
• 想让 border 不占空间？用 outline 替代（但 outline 不影响布局，也不支持圆角）

用 devtools 实时“剥洋葱”验证

别只看代码，打开浏览器开发者工具（F12），选中元素，在 Styles 面板右侧勾选 Show box model，就能看到 content/padding/border/margin 的彩色分层。鼠标悬停每层，对应区域会高亮——这是最直接的理解方式。

• 修改 padding 值，实时看蓝色区域（padding）扩张，同时总宽度变化
• 删掉 border，观察橙色框消失，总尺寸缩小（content-box 模式下）
• 切换 box-sizing，对比两种模式下 width 的实际效果差异