<p>设置 box-sizing: border-box 可使元素 height 包含 content、padding 和 border，避免因边框和内边距导致高度增加；推荐全局设置 * { box-sizing: border-box; }。</p>
元素设置了边框后，高度变高了？不是你算错了，是 CSS 默认的 box-sizing: content-box 在起作用——边框和内边距会额外加在 width/height 之外。解决办法很简单：用 box-sizing: border-box。
border-box 是什么
它让元素的 width 和 height 包含内容区、内边距（padding）和边框（border），也就是说，你设 height: 100px，那整个盒子（内容+padding+border）就刚好是 100px 高，不会撑开。
怎么启用 border-box
推荐全局设置，一劳永逸：
* {
box-sizing: border-box;
}或者只对特定元素设置：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
box-sizing: border-box; /* ✅ 高度仍是 100px */
}content-box 和 border-box 对比
- content-box（默认）：height=内容高度；总高度 = height + padding×2 + border×2
- border-box：height=整个盒子高度；内容高度 = height − padding×2 − border×2
小提醒
border-box 不影响 margin，它只管盒模型内部（content/padding/border）如何分配空间。如果你用 flex 或 grid 布局，配合 border-box 会让尺寸更可控，尤其做等高卡片、表单控件时不容易错位。
基本上就这些。改一行 CSS，高度就稳了。
