输入
width:200px padding:20px border:2px margin:24px
总宽度
292px（content-box）
design / 可用工具
CSS 盒模型交互式可视化工具
交互式调节 margin、padding、border 和内容尺寸，实时展示盒模型结构和实际占用空间，并生成对应 CSS 代码。
CSS盒模型可视化
在线工具
CSS 盒模型可视化器
可视化
实际占用空间
内容区实际宽度-
内容区实际高度-
总占用宽度-
总占用高度-
CSS 代码
使用场景
- 理解 content-box 与 border-box 的区别
- 调试布局时确认元素占位
- 前端学习参考
如何使用
- 1. 调节各项数值
- 2. 查看可视化结果
- 3. 复制生成的 CSS 代码
示例输入输出
FAQ
content-box 和 border-box 的区别是什么？
content-box 中 width/height 只包含内容区域；border-box 中 width/height 包含内容、padding 和 border。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
Flexbox 可视化操作台
弹性盒子一维布局微调发生器
无需脑膜炎发作的查 MDN。直观拖拽选择 Flex direction 与 Justify Content 系列属性对抗。实时在右侧 Canvas 看到你的积木是如何排列、挤压或环绕堆叠的。包含 `gap` 测试。
Design CSS Layout
CSS Grid 二维栅格引擎
现代响应式网格轨道分割器
用最粗暴直白的方式划分横竖行列，并设置沟槽（Gap）。迅速拿到能够直接构建如管理后台 Layout 或电商橱窗画廊的 `display: grid` 参数。自带 Holy Grail 三栏布局等快速挡位。
Design CSS Layout
CSS 单位转换
CSS 单位转换器
在 px、rem、em、pt、vw、vh、% 之间互转，支持自定义基准值。
CSS 单位 转换