CSS 盒模型可视化
免费线上 CSS 盒模型可视化工具。拖曳 margin、border、padding、content 实时看层层变化，彻底搞懂 content-box 与 border-box 的差异。
CSS 盒模型可视化
免费线上 CSS 盒模型可视化工具。拖曳 margin、border、padding、content 实时看层层变化，彻底搞懂 content-box 与 border-box 的差异。
关于 CSS 盒模型
每个元素都是四层包覆
由内而外，一个元素依序是 content、padding、border、margin。content 放文字或子元素；padding 是边框内侧的留白；border 包住 padding；margin 把相邻元素推开。本工具把四层都画出来，让你看见每个属性如何加大元素的占位。
content-box 与 border-box 的差别
content-box（预设）下，width 只设定 content，padding 与 border 往外加，所以元素最后比你设的 width 更宽。border-box 下，width 指的是 border-box，padding 与 border 从内侧扣掉，content 因此缩小。在这里切换两种模式，看同一个 width 产生两种不同占位。
常见问题
关于这个主题的常见疑问与实用解答。
什么是 CSS 盒模型？
它是浏览器决定每个元素大小的方式：四层包覆——content、padding、border、margin。搞懂它，几乎所有排版意外都能解释。
我设了 width，元素却更宽，为什么？
在预设的 content-box 模式下，padding 与 border 会加在 width 之外。改用 border-box 让 width 包含 padding 与 border，或用本工具看确切数字。
我的数据会被发送到服务器吗？
不会。所有盒模型计算完全在你的浏览器中执行，你输入的任何内容都不会离开你的设备。