CSS 盒模型可视化工具，免费

使用方法

1. 输入盒模型值：在输入框或交互式滑块中设置外边距、边框、内边距和内容尺寸。
2. 查看可视化：经典的嵌套盒图会实时更新 — 外边距（橙色）、边框（黄色）、内边距（绿色）和内容（蓝色），各自清晰标注。
3. 复制 CSS：点击「复制 CSS」，即可获得当前配置的元素所需的全部盒模型属性。

为什么使用 CSS 盒模型可视化工具？

CSS 盒模型是网页布局最基础的概念之一 — 也是最常见 bug 的来源，尤其是在 box-sizing 值混用、外边距合并和边框尺寸处理时。这款交互式可视化工具让盒模型变得具体可感：您调整数值，立刻看到外边距、边框和内边距如何围绕内容层层堆叠。对于学习、调试和教学 CSS 都必不可少。

功能特性

• 交互式图示：经典的嵌套盒模型视图，带颜色编码的层级（外边距、边框、内边距、内容）。
• box-sizing 切换：在 content-box 和 border-box 之间切换，查看每种模式如何影响总尺寸。
• 单独控制四边：可分别设置外边距、内边距和边框的上/右/下/左数值。
• 总尺寸计算：显示元素计算后的总宽度和总高度。
• CSS 输出：为配置好的盒模型生成可直接使用的 CSS。

常见问题

content-box 和 border-box 有什么区别？

使用 content-box（默认）时，width 和 height 只应用于内容区域 — 内边距和边框会额外加到元素总尺寸上。使用 border-box 时，width 和 height 包含内边距和边框，尺寸更加可预测。大多数现代 CSS reset 都会对所有元素应用 box-sizing: border-box。

什么是外边距合并（margin collapse）？

当两个垂直方向的外边距相邻时（相邻 block 元素之间，或父元素与首个/最后一个子元素之间），它们会合并为一个外边距，等于两者中较大的值。在 flex 或 grid 子元素之间、或含内边距/边框的元素上不会发生合并。

如何去除行内元素下方的多余空隙？

行内元素（如 ）下方会因 line-height 基线对齐出现一点空隙。可以给该元素加 display: block，或 vertical-align: bottom，或在父元素上设置 font-size: 0。