输入
width:200px padding:20px border:2px margin:24px
总宽度
292px（content-box）
设计配色
CSS 盒模型交互式可视化工具
交互式调节 margin、padding、border 和内容尺寸，实时展示盒模型结构和实际占用空间，并生成对应 CSS 代码。
CSS盒模型可视化
设计配色
CSS 盒模型可视化器
可视化
实际占用空间
内容区实际宽度-
内容区实际高度-
总占用宽度-
总占用高度-
CSS 代码
使用场景
- 理解 content-box 与 border-box 的区别
- 调试布局时确认元素占位
- 前端学习参考
如何使用
- 调节各项数值
- 查看可视化结果
- 复制生成的 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 生成
CSS Grid 生成 - 行列轨道与间距
可视化设置行列数与间距，生成 display:grid 基础样式，适合后台布局、卡片栅格与等分轨道草稿，可直接复制到项目中调整。
CSS Grid 布局
CSS 单位转换
CSS 单位转换 - px rem em vw 工具
在 px、rem、em、pt、vw、vh、% 之间换算，可自定义根字号、父元素字号与视口宽高，适合响应式与设计稿转代码。
CSS 单位 换算