css边框影响元素高度怎么办_通过border-box让高度不再被边框改变

设置 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;
}

或者只对特定元素设置：

一站式虚拟主播视频生产和编辑平台

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

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

以上就是css边框影响元素高度怎么办_通过border-box让高度不再被边框改变的详细内容，更多请关注其它相关文章！