马上默 在线轻量工具箱
登录

盒模型可视化调试器

设定 width / height 与 margin、border、padding 四层数值，按比例绘制剖面图直观看到实际占位，并逐行算给你看 content-box 与 border-box 两种模式下的总宽高。

内容尺寸（px）

box-sizing

margin

border

padding

margin 外边距 border 边框 padding 内边距 content 内容

场景预设（8 个）

常见组件参数一键填入，再观察尺寸构成与问题清单的变化。

尺寸构成（自绘 SVG）

按实际像素比例绘制，直观看到 width 之外 padding、border、margin 各占多少。

问题清单与修复建议

逐项检查模式、占比、对称性与零值情况，严重级别由高到低排列。

    方案管理 · 数值对比 · 导出

    调好的参数可存成方案随时载入，也能生成可分享链接；结果里的数值列会自动画成对比图，并支持导出 CSV / JSON。

    最近方案 暂无

    📦口径说明与常见误填

    四层各算各的，占位尺寸才不会算错。

    content-box 口径
    实际占位宽 = width + 左右 padding + 左右 border + 左右 margin，这是 CSS 默认模式，width 只指内容区。
    border-box 口径
    占位宽 = width + 左右 margin：padding 与 border 向内挤压内容区，width 即所见总宽，现代项目常全局重置成它。
    margin 与 padding
    margin 在盒子外部、透明、可负值且相邻时会折叠；padding 在边框内部、属于盒子自身、会被背景覆盖。
    border 的角色
    border 有粗细与颜色，计入盒子自身尺寸；border-box 下它和 padding 一起向内挤压内容区。
    常见误区
    「设了 width:200px 怎么变宽了」：content-box 下 padding/border 是加法，不是从 width 里扣；切到 border-box 按钮对比一次就懂。

    这个工具解决什么问题

    盒模型四层（content / padding / border / margin）的加减关系是 CSS 排版的第一个坑。本页把数值变成按比例剖面图：输入宽高与四层边距，四层颜色实时绘制，右侧表格逐行给出两种 box-sizing 的算式，切换按钮即可对比 content-box 与 border-box 的真实差异。

    三条算盒子铁律

    ① 先定模式再写宽度：项目全局用 border-box 就按所见即所得写 width；混用时每个组件都要先问一句自己是哪种模式。

    ② 负 margin 单独验证：本页按数值画图，负 margin 会让占位缩小甚至重叠，真实页面里务必刷新看邻居的反应。

    ③ 算总高别漏 border：垂直占位 = height + 上下 padding + 上下 border + 上下 margin，结果表已逐层列出，排查错位先对这张表。

    怎么用

    1. 第 1 步 · 输入内容尺寸
      填 width / height，这是盒模型最内层内容区的基准值。
    2. 第 2 步 · 切换 box-sizing
      点 content-box / border-box 按钮，剖面图与算式即时对比两种口径的差异。
    3. 第 3 步 · 填四层边距数值
      分别输入 margin、border、padding 的上下左右值，图形按比例重绘，超宽自动缩放。
    4. 第 4 步 · 核对计算结果表
      右侧表格逐行给出两种模式下的 border-box 尺寸与含 margin 的占位尺寸。

    更新记录

    • v1.0 2026-11-02
    • 2026-11-02 上线首个版本
    • 2026-11-02 完善结果展示

    常见问题

    css 盒模型怎么算实际宽度？
    content-box 下：实际占位 = width + 左右 padding + 左右 border + 左右 margin；border-box 下：占位 = width + margin，padding 与 border 向内挤压内容区。本页表格逐层给出算式。
    border-box 和 content-box 区别有图解吗？
    保持数值不变，切换上方 box-sizing 按钮，剖面图会即时展示两种模式内容区大小的差异——这就是最直观的图解。
    margin 和 padding 的区别是什么？
    margin 是盒子外部的透明间距，影响与邻居的距离且会发生外边距折叠；padding 是边框内部的填充，属于盒子自身、会被背景色覆盖。图中橙层与绿层即两者。
    盒子宽度加了 padding 后变宽怎么办？
    因为默认是 content-box，padding 会叠加到总宽。解决：设 box-sizing: border-box（现代项目常全局重置），此时 width 就是含 padding 与 border 的总宽，不再被撑大。
    有盒模型在线计算工具吗？
    本页即在线计算器：输入任意四层数值，自动算出 border-box 尺寸与含 margin 的占位尺寸，并同时列出两种模式对比，超宽时图形按比例缩放不会画爆。

    💬 留言板 0

    全部留言需审核通过后展示
    💬

    还没有留言，来抢沙发吧！

    ✍️ 说点什么
    0 / 500
    图形验证码

    🔗 相关工具

    🧮 CSS Grid 布局演练场盒模型搞懂再去练网格 → 🧱 Flexbox 布局演练场看 flex 子项怎么被挤压 → 🧩 Tailwind 类名速查器p / m / border 原子类像素对照 → 📏 媒体查询断点生成器盒子在不同断点下的宽度规划 →
    👣 做完这一步，顺便看看
    🏛️ 凯撒密码解密 凯撒密码解密 ：1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 ：把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具：粘贴或输入代码（支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具：输入前景文字色与背景色（支持 #he… →
    全部工具 →