CSS 盒模型可视化

调整 margin、border、padding、content 尺寸，实时预览盒模型结构

功能CSS 盒模型可视化

可调属性margin / border / padding / content

输出盒模型图 + CSS 代码

margin（20px）

border（2px）

padding（16px）

内容宽度（120px）

内容高度（80px）

box-sizing: border-box

盒模型预览总宽 176px

120x80

生成的 CSS 代码0 字符

margin/border20px / 2px

padding/content16px / 120x80

总尺寸176x140px

CSS 盒模型说明

CSS 盒模型是布局的核心概念，每个元素由 content（内容）、padding（内边距）、border（边框）、margin（外边距）四层组成，由内向外依次嵌套。

content-box（默认）：width/height 仅包含内容区，实际总宽 = width + padding + border + margin。

border-box：width/height 包含 content + padding + border，实际总宽 = width + margin。更符合直觉，广泛用于布局。