Chrome DevTools盒模型图实时显示content（橙）、padding（蓝）、border（红）、margin（绿）四层尺寸与颜色，支持悬停高亮、点击编辑；需注意box-sizing、display、flex/grid影响实际渲染，margin合并不体现在图中。
浏览器开发者工具（DevTools）自带的盒模型可视化功能，比手写CSS调试更直接、更可靠——它实时显示当前选中元素的 content、padding、border、margin 四层尺寸和颜色，还能交互式修改数值。不需要额外插件或代码。
Chrome DevTools 里怎么看盒模型图示
打开 Chrome，右键页面任意元素 → “检查”（或按 Ctrl+Shift+I），在 Elements 面板中选中目标元素后，右侧 Styles 面板下方会自动出现一个带颜色分区的矩形图，就是盒模型可视化区域。
这个图从内到外依次是：
-
橙色：content 区域（对应
width/height） - 蓝色：padding 区域（上下左右分别标出数值）
-
红色：border 区域（若
border-style是none或未设，则不显示） - 绿色：margin 区域（注意：负 margin 会以虚线+“−”号标出）
鼠标悬停在任一区域上，会高亮对应 CSS 属性（如 hover padding 区域 → 右侧 padding-top: 12px 行被加粗）；点击该区域还能直接编辑数值，回车即生效。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
盒模型数值不准？重点看这三项
常见“看着图示对不上实际尺寸”的情况，基本都出在这三个地方：
-
box-sizing值不是border-box：默认是content-box，此时图示中的 content 宽度 = 你写的width，但总宽度 =width + padding×2 + border×2—— 图虽然画对了，但人容易误读 -
display是inline：此时padding-top/margin-top在图中会显示，但不参与布局推挤（比如不会撑开父容器高度），图示存在，效果缺失 - 父容器用了
flex或grid：子项的width可能被flex-basis覆盖，图示仍显示你写的width值，但实际渲染尺寸由 flex 规则决定
为什么 margin 显示为 0 却有空白？
这是外边距合并（margin collapse）的典型表现：两个相邻块级元素（如连续的 p）的垂直 margin 会合并，只保留最大值。DevTools 的盒模型图只会显示你写的值（比如两个 p 都设了 margin-bottom: 24px），但计算后的实际间距只显示一次 24px，且不会标注“已合并”。
验证方法：
- 在 Elements 面板中，把鼠标移到其中一个
p上，看右下角浮层显示的“Computed”高度是否包含预期 margin - 临时给父容器加
overflow: hidden或padding: 0.1px，打断合并，再看图示变化 - 用
getComputedStyle(el).marginBottom查 JS 计算值，它返回字符串（如"24px"），但不反映合并结果
想截图/导出盒模型图？没有原生功能
Chrome DevTools 不提供导出盒模型图的功能。如果需要留存或分享，只能手动截图（推荐用 Ctrl+Shift+P → 输入 “screenshot” → 选 “Capture area screenshot”）。注意截图前先展开 Elements 面板并确保盒模型区域完全可见，否则可能截不到。
真正容易被忽略的是：图示中 margin 的绿色区域，只代表“该元素声明的 margin 值”，不代表它一定在布局中生效——比如被父容器 overflow: hidden 剪裁、被 transform 移动、或因 position: absolute 脱离文档流而不再参与外边距计算。这时候图还在，但意义已不同。
