CSS 盒模型可视化器
比较 content-box 与 border-box，图示使用实际 CSS 像素。大盒子可滚动查看，零内容尺寸保持为零。
CSS 盒模型可视化器
图示使用实际 CSS 像素，大盒子可滚动查看。宽高：1–1,200；均匀间距：0–100 px。
- 外边距
- 边框厚度
- 内边距
- 内容尺寸
使用步骤
如何使用
- 设置 1–1,200 px 的宽高，以及 0–100 px 的均匀外边距、边框和内边距。
- 选择内容盒或边框盒，查看各层及计算尺寸。
- 复制 CSS 或重置。空值或无效值会清除结果并禁用复制。
尺寸公式
content-box：内容=声明尺寸；实际元素=声明尺寸+2×(内边距+边框)。border-box：实际元素=max(声明尺寸, 2×(内边距+边框))；内容=max(0, 声明尺寸−2×(内边距+边框))。两者的外部尺寸=实际元素+2×外边距，分别计算宽度和高度。
最小占用与范围
各值不能为空，须是指定范围内的有限数。边框盒的内边距和边框超过声明尺寸时，内容尺寸为零，实际元素尺寸保持最小占用。外边距位于元素之外。
图示比例
一个计算像素对应一个 CSS 像素，不缩放适配窗口。滚动视口高 360 CSS 像素，大盒子可水平或垂直滚动查看。各层明确采用 content-box，无额外内边距或内容最小尺寸。图例说明颜色。
常见问题
你可能还想知道
图示会缩放适配吗？
不会。图示使用实际 CSS 像素，超过视口时滚动查看。报告尺寸是未缩放的 CSS 计算值。
外边距会让元素本身变大吗？
它增加外部空间，不增加元素实际尺寸。工具仅模拟均匀间距，不模拟外边距折叠或内容固有尺寸。