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 子元素之间、或含内边距/边框的元素上不会发生合并。

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

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

CSS 盒模型实际定义了什么

CSS 盒模型是网页上每个元素的矩形表示。每个元素有四个同心盒子：内容盒（文本、图像、子元素所在的地方）、padding 盒（内容与边框之间的空间，在可见边界内）、边框盒（在 padding 周围绘制的可见轮廓），以及外边距盒（边框外的透明空间，将此元素与邻居分开）。元素的总可见大小是内容 + padding + 边框；外边距是不可见的但会将其他元素推开。

关键概念是 box-sizing。默认情况下（box-sizing: content-box，CSS 1 规范值），width 和 height 属性仅应用于内容盒。如果你设置 width: 200px; padding: 20px; border: 2px solid，总渲染宽度是 200 + 40 + 4 = 244 像素。这违反直觉：「200px 宽」的元素实际占用 244 像素水平空间。box-sizing: border-box 替代方案（CSS 3 中添加）反转了这一点：width 属性是包括 padding 和边框的总可见大小，所以内容区域缩小以适应。border-box 是大多数开发者期望的；通过 Paul Irish 2012 年的「* { box-sizing: border-box }」CSS 重置成为事实上的标准。

理解盒模型很重要，因为布局错误几乎总是追溯到对哪个值应用于哪个盒子的混淆。「为什么我的元素比我设定的更宽？」是 content-box 的惊讶。「为什么我的外边距没有把兄弟元素推下去？」通常是外边距折叠。「为什么 padding-top: 50% 行为怪异？」因为百分比 padding 是相对于父级宽度计算的，不是高度。每个 CSS 开发者都会遇到这些混淆；这个可视化工具让你调整值并实时看到结果盒几何，使它们变得具体。

本工具的幕后运作

交互式图表是一系列嵌套的彩色 div，对应每个盒子（外边距橙色、边框黄色、padding 绿色、内容蓝色）。当你更改输入值时，JavaScript 更新图表 div 的内联 style 属性，以便它们以数字和视觉方式反映值。比例缩放以适应预览区域；绝对像素值会将图表推出屏幕，对于典型输入。

总大小计算取决于 box-sizing 模式。对于 content-box：总宽度 = 内容宽度 + padding-left + padding-right + border-left + border-right。对于 border-box：总宽度 = width 值（padding 和边框从内容区域减去）。当你切换 box-sizing 时，工具同时计算两种模式，所以你可以直接比较。

生成的 CSS 输出使用你的输入作为属性值：box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;。将其直接复制到你的样式表并应用匹配的类。没有任何东西离开你的浏览器；一切都在本地 JavaScript 中运行。没有分析，没有后端，没有账户。刷新，状态就消失了。

CSS 盒模型简史

• CSS 1 规定 content-box，1996 年。CSS 1 推荐标准（1996 年 12 月）定义了 W3C 盒模型：宽度仅应用于内容，padding 和边框增加总大小。这成为标准，但 Internet Explorer 4 和 5 实现了一个替代模型，其中宽度包括 padding 和边框（类似于今天的 border-box）。
• IE 怪异模式和盒模型战争，1997 至 2001 年。IE 4（1997）和 IE 5 附带它们的非标准盒模型；IE 6（2001）引入由 doctype 声明触发的「标准模式」，切换到 W3C 盒模型。这种差异创造了多年的跨浏览器布局错误和「怪异模式与标准模式」知识，每个 Web 开发者必须学习直到 2010 年。
• CSS 重置和 Eric Meyer 的经典样式表，2007 年。Eric Meyer 发布了规范的 CSS 重置（2007 年 5 月），将所有元素的外边距、padding 和其他默认值设为零。成为可预测跨浏览器样式的标准做法。重置不直接处理 box-sizing 但规范化了继承默认值的混乱。
• CSS3 中的 box-sizing 属性，2009 至 2014 年。CSS3 引入 box-sizing: border-box 作为 content-box 的可选替代。WebKit 和 Firefox 从 2009 年开始支持它；IE 8（2009）成为第一个原生支持它的 IE 版本。允许开发者按元素选择 IE 式或 W3C 式盒模型。
• Paul Irish 的通用 border-box，2012 年。Paul Irish（Google）发布博客文章「* { box-sizing: border-box } FTW」（2012 年 2 月），主张通用 border-box 是新项目的合理默认。该模式通过框架默认（Bootstrap、Tailwind、Material UI）迅速传播。到 2015 年，大多数 CSS 重置和框架都以 border-box 作为默认。
• 逻辑属性，2018 至 2024 年。CSS Logical Properties and Values Module Level 1（CR 2018 年 6 月）引入方向无关的替代方案：margin-inline-start（文本方向起点）替代 margin-left，padding-block（顶部 + 底部）替代 padding-top + padding-bottom。对从右到左的语言（阿拉伯语、希伯来语）和现代国际化至关重要。浏览器支持到 2022 年达到 95%+。

真实世界的工作流

• 调试布局错误。当元素以意外大小渲染时，打开浏览器 DevTools 的计算样式面板会以数字形式显示四个盒值。这个可视化工具对于事先做数学计算很有用：「如果我设置 width 200, padding 16, border 2，每种 box-sizing 模式下的总大小是多少？」在教初学者为什么 width: 100% 加 padding 在 content-box 模式下溢出父级时特别有用。
• 教初学者 CSS。盒模型是初学 Web 开发者必须内化的第一个抽象概念。彩色编码的交互式可视化胜过阅读规范。训练营讲师和自学学习者使用盒模型可视化工具作为「触觉」方式来看外边距、边框和 padding 如何堆叠。这个工具部分就是为此目的而存在。
• 设计系统组件尺寸。设计系统在 token 中指定按钮高度、padding 节奏和外边距比例（例如 spacing-1、spacing-2、spacing-3）。在代码中实现这些时，盒模型决定最终渲染的按钮是否是预期的尺寸。首先可视化数学以便在它们送达 Figma 到 React 的交接之前捕捉到 off-by-padding 错误。
• 响应式设计和百分比外边距。padding、外边距、width 和 height 的百分比值是相对于父级的内容宽度（不是高度，令人惊讶地）计算的，这可能在移动设备上导致奇怪的行为。盒模型可视化工具帮助你思考百分比的含义，然后再编写 CSS。例如，div 上的 padding-top: 50% 创建一个正方形宽高比容器（在 aspect-ratio 属性之前的日子用于图像占位符）。
• 无障碍命中目标尺寸。WCAG 2.1 SC 2.5.5（AAA 级别）推荐最小 44x44 CSS 像素触摸目标。盒模型决定按钮的内容 + padding 组合是否达到此阈值。使用可视化工具确认在 18px 行高文本周围的 padding: 12px 16px 给出一个在两个维度上都超过 44px 的按钮，满足该指南。
• CSS Grid 和 Flexbox 对齐。现代布局工具（CSS Grid、Flexbox）将每个 grid/flex 项视为受盒模型约束的盒子。理解 padding 和外边距如何与 gap、justify-content 和 align-items 交互需要盒模型熟练度。在 flex/grid 容器内部抑制外边距折叠，这经常让习惯于传统块布局的 CSS 开发者感到惊讶。

常见陷阱及其含义

• 外边距折叠惊喜。当两个块元素的外边距垂直相接时，它们折叠为较大的那个，不是总和。20px 的底部外边距遇到 30px 的顶部外边距产生 30px 的空间，不是 50px。如果父级没有设置 padding、边框或 overflow，父级和第一个/最后一个子级外边距也会折叠。在 flex 或 grid 容器内部，外边距不折叠。这条规则在某些时候捕获了每个 CSS 开发者。
• content-box 与 border-box 宽度数学。在 content-box 元素上设置 width: 100%; padding: 20px 使其比父级宽 40px（溢出）。在 border-box 中，相同的声明正确地位于父级内。这是最常见的盒模型陷阱；通用 * { box-sizing: border-box } 规则预先修复了大部分。始终知道你在哪个模式下工作。
• 百分比 padding/外边距相对于宽度。padding-top: 50% 和 margin-bottom: 50% 根据父级的内容宽度计算百分比，不是高度。这非显而易见，是经典「宽高比容器」黑客的基础（具有 padding-top: 56.25% 的 div 创建 16:9 盒子）。现在 CSS 有了 aspect-ratio 属性，但遗留代码和现代 Tailwind 都依赖于 percent-padding 技巧。
• 内联元素基线间隙。在包含 div 内的 <img> 在其下方有一个神秘的 4 到 6 像素间隙。这是因为内联元素与文本基线对齐，为下行字母留出空间。用 img { display: block }、img { vertical-align: bottom } 或在父级上设置 font-size: 0 修复。这是 CSS 中最古老的盒模型错误之一，可追溯到 1996 年。
• 用于布局技巧的负外边距。外边距接受负值，这会将元素拉向彼此，偶尔有用（例如，将容器扩展到父级 padding「之外」）。但是，负外边距是混乱重叠错误的常见来源。有意使用它们，注释你的代码，并在可能时优先选择 CSS Grid/Flexbox 定位。负 padding 是无效的 CSS，被浏览器忽略。
• Padding + 边框 + 内容 > 容器。当内容 + padding + 边框之和超过父级可用宽度时，元素溢出。常见修复：box-sizing: border-box，减少 width 值，在父级上使用 overflow: hidden（剪辑溢出），或在 flex 子级上使用 min-width: 0 来覆盖隐式 min-width: auto 行为。许多「布局在移动设备上断裂」的错误是由盒模型数学引起的溢出。

隐私：一切都在你的浏览器中运行

CSS 学习和可视化工具有两种风格：运行客户端 JavaScript 的简单 HTML 页面（私密、快速、无需设置）和带保存项目的云编辑器（协作但带隐私权衡）。这个工具是第一种。你输入的值、你的 box-sizing 切换状态、你生成的 CSS：所有都保留在你的浏览器会话中。刷新页面，状态消失，除非你先复制了 CSS。

这里隐私利害关系较低，因为盒模型值很少包含敏感信息。不过，缺乏分析很重要：你可以自由实验，而不必记录你的试错过程。在课堂或企业培训环境中特别有用，让学生或受训者在第三方平台上注册账户是一个摩擦点。这是一个没有后端的单一静态页面，可在任何浏览器中使用，包括锁定的企业机器。

什么时候另一个工具是正确选择

• 用于实时调试的浏览器 DevTools。Chrome 和 Firefox DevTools 包括一个盒模型面板，显示实时页面上任何选定元素的四个盒值。内联编辑值并看到页面更新。对于调试实际页面布局（不是抽象盒模型探索），DevTools 胜过这个工具，因为它在你的真实代码上工作，具有真实的 CSS 级联和继承。
• Figma 用于设计规范输出。设计师使用 Figma、Sketch 或 Adobe XD 以精确像素测量布局组件。设计工具的检查面板导出开发者翻译成 CSS 的外边距和 padding 值。对于设计到开发的交接，设计工具是真理的来源；这个可视化工具是为了理解 CSS 行为，不是生成生产组件规范。
• CSS-in-JS 用于组件封装。在使用 styled-components、Emotion、vanilla-extract 或类似 CSS-in-JS 解决方案构建组件库时，盒模型封装在每个组件内。外部包装器上的外边距，内部的 padding。这个可视化工具帮助推理单个组件的几何形状；库处理跨组件布局协调。
• 用于布局的 CSS Grid/Flexbox 工具。对于多元素布局（页面网格、卡片库、导航栏），CSS Grid 和 Flexbox 是正确的抽象，不仅仅是盒模型。我们的 Flexbox Generator 和 CSS Grid Generator 工具直接帮助这些布局。盒模型对现代布局是必要但不充分；为正确的规模使用正确的工具。

更多常见问题

我应该使用通用 * { box-sizing: border-box } 吗？

对大多数项目来说，是的。Paul Irish 2012 年的提议现在是行业默认，并与大多数开发者期望 width 和 height 的工作方式一致。Bootstrap、Tailwind、Bulma 和 Material UI 等框架都以 border-box 作为默认。从 2026 年开始的现代项目应该在重置顶部设置 *, *::before, *::after { box-sizing: border-box; }，并很少需要再考虑 box-sizing。对于 border-box 会搞砸的个别元素，可以对 content-box 进行特定的覆盖。

为什么我的外边距把父级向下推，而不是推兄弟元素？

这是外边距折叠。当子级的顶部外边距与父级的顶部边缘相遇，它们之间没有 padding/边框时，子级的外边距「逃逸」并应用于父级。修复：在父级上添加 padding-top: 1px（任何值都有效）、添加 border: 1px solid transparent、将父级设置为 flex 或 grid 容器（折叠在这些模式下被抑制），或在父级上使用 display: flow-root（一个现代显式「建立新块格式化上下文」规则）。所有这些都阻止外边距穿透折叠。

margin: auto 和 margin: 0 之间有什么区别？

margin: 0 表示无外边距；元素紧贴邻居。margin: auto 表示浏览器计算外边距以分配剩余的水平空间，通常用于居中块元素：margin-left: auto; margin-right: auto; 平均分割剩余空间。margin: auto auto auto auto（或简写 margin: auto）在 flex 容器内水平和垂直居中。在 flex/grid 之外，只有水平 auto 外边距有效。

outline 与 border 有何不同？

Outline 围绕元素绘制，但在盒模型之外：它不添加到元素大小，也不推开邻居。Border 是盒模型的一部分，添加到渲染大小。Outline 通常用于焦点环（:focus-visible 轮廓），你想要一个可见指示器而不移动布局。Border 在线条应该是元素结构一部分时使用。不要在没有提供替代焦点指示器的情况下删除 outline: none；这样做会破坏键盘可访问性。

为什么使用像 margin-inline-start 这样的逻辑属性？

逻辑属性（margin-block-start、padding-inline 等）适应文档的书写方向。在英语（从左到右）中，margin-inline-start 与 margin-left 相同。在阿拉伯语或希伯来语（从右到左）中，它自动变成 margin-right。对于支持多种语言的网站，逻辑属性使 CSS 国际化自动化。对于仅英语的网站，它们在效果上等同，但更清楚地表明意图：「这个外边距在文本流的起点」而不是「这个外边距在左侧」。

如何创建固定宽高比框？

现代方法是 aspect-ratio CSS 属性：div 上的 aspect-ratio: 16/9 使其高度自动为其宽度的 9/16。在所有现代浏览器中支持（2021+）。遗留技术使用 padding-top 作为百分比：具有 padding-top: 56.25% 的 div 创建 16:9 比例（9/16 = 56.25%）。padding-top 技巧仍然有效，但属性语法更干净。对新代码使用 aspect-ratio；遗留黑客仍然存在于 Tailwind 和其他需要广泛浏览器支持的工具中。