无需登录 数据私有 本地保存

盒模型对比演示 - content-box vs border-box

前端设计 教育工具 CSS 对比 盒模型
57
0
0
0

盒模型对比演示

content-box vs border-box
Content 内容 Padding 内边距 Border 边框 Margin 外边距
220px
140px
20px
5px
20px
content-box width = 内容宽度
Content
border-box width = 含 padding + border
Content
常见问题 & 知识点

CSS 盒模型是网页布局的基础概念。每个 HTML 元素都可以看作一个矩形盒子，由四个部分组成（从内到外）：Content（内容）→ Padding（内边距）→ Border（边框）→ Margin（外边距）。理解盒模型是掌握 CSS 布局的关键。

content-box（默认）：设置的 width/height 只作用于内容区域，padding 和 border 会在外部额外增加尺寸。盒子实际占用宽度 = width + padding×2 + border×2。
border-box：设置的 width/height 包含了 content、padding 和 border，内容区域会被自动压缩。盒子实际占用宽度 = width（不变）。这使得尺寸计算更加直观。

使用 box-sizing: border-box 后，元素的 width/height 就是最终可见尺寸，无需心算 padding 和 border 的额外空间。这在响应式布局中尤其方便——例如设置 width: 50% 就能精确占据一半空间，不用担心 padding 导致溢出。大多数 CSS 框架（包括 Bootstrap 5）默认对所有元素使用 border-box。

在 CSS 中使用以下代码即可全局应用 border-box：
*, *::before, *::after { box-sizing: border-box; }
这是现代前端项目的标准做法，Bootstrap 等框架已内置此设置。

Padding（内边距）在边框内部，是内容与边框之间的空间，背景色会覆盖 padding 区域。Margin（外边距）在边框外部，是元素与其他元素之间的透明空间，背景色不覆盖 margin。简单记忆：padding 在"屋里"，margin 在"屋外"。

根据 W3C 标准，浏览器默认使用 content-box。但大多数开发者认为 border-box 更实用，因此现代 CSS reset 和框架都会将其改为 border-box。在没有 reset 的裸 HTML 页面中，盒模型默认为 content-box。
🔧 相关工具