设置 box-sizing: border-box 可使元素 height 包含 content、padding 和 border，避免因边框和内边距导致高度增加；推荐全局设置 * { box-sizing: border-box; }。

元素设置了边框后，高度变高了？不是你算错了，是 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;
}

或者只对特定元素设置：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

.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，高度就稳了。