设置 box-sizing: border-box 可使元素 height 包含 content、padding 和 border，避免因边框和内边距导致高度增加；推荐全局设置 * { box-sizing: border-box; }。
元素设置了边框后，高度变高了？不是你算错了，是 CSS 默认的 box-sizing: content-box 在起作用——边框和内边距会额外加在 width/height 之外。解决办法很简单：用 box-sizing: border-box。
它让元素的 width 和 height 包含内容区、内边距（padding）和边框（border），也就是说，你设 height: 100px，那整个盒子（内容+padding+border）就刚好是 100px 高，不会撑开。
推荐全局设置，一劳永逸：
* {
box-sizing: border-box;
}或者只对特定元素设置：
立即学习“前端免费学习笔记（深入）”；
.card {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
box-sizing: border-box; /* ✅ 高度仍是 100px */
}border-box 不影响 margin，它只管盒模型内部（content/padding/border）如何分配空间。如果你用 flex 或 grid 布局，配合 border-box 会让尺寸更可控，尤其做等高卡片、表单控件时不容易错位。
基本上就这些。改一行 CSS，高度就稳了。
以上就是css边框影响元素高度怎么办_通过border-box让高度不再被边框改变的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
105
收藏
取消收藏
