<p>按钮加边框后变大是因默认 box-sizing: content-box 导致边框额外增加尺寸；设为 border-box 可使边框向内收缩，保持设定宽高不变，推荐全局设置 * { box-sizing: border-box; }。</p>
按钮加了边框后变大，不是边框“有问题”，而是 CSS 盒模型默认行为：border-width 会额外增加元素的总宽度和高度。想让边框不撑大按钮，关键在控制 box-sizing，配合合理设置 border-width。
默认行为：border 增加总尺寸（content-box）
当没设置 box-sizing 或显式设为 content-box（浏览器默认）时：
按钮设定 width: 100px; height: 40px;，再加 border: 2px solid #333;，实际占用空间就变成：
宽 = 100px + 左右 border（2px × 2 = 4px）= 104px
高 = 40px + 上下 border（2px × 2 = 4px）= 44px
解决办法：用 border-box 让边框“向内缩”
给按钮加上：box-sizing: border-box;
这时，你设定的 width 和 height 就包含 content、padding 和 border —— 边框不再撑开整体尺寸，而是从内部“挤占”空间。
- 保持
width: 100px; height: 40px;不变，加border: 2px solid #333;后，内容区自动缩小为 96×36px，总尺寸仍是 100×40px - 推荐全局设置：
* { box-sizing: border-box; }，一劳永逸避免各类尺寸错乱 - 注意：padding 也计入总尺寸，若同时加 padding 和 border，需预留足够空间，或微调 width/height
border-width 要配合设计节奏，别盲目加粗
边框变大感，有时不是盒模型问题，而是 border-width 本身太突兀：
- 常规按钮用
1px或2px边框更协调；3px以上容易显得笨重 - 想视觉上“加粗但不扩大”，可用
outline替代（但 outline 不占布局空间，且不支持圆角，慎用于按钮主边框） - 用
inset或outset等border-style配合细边框，也能增强立体感而不明显增厚
检查是否被其他样式干扰
有时候按钮“变大”不是边框导致，而是：
- 父容器设置了
font-size或line-height，影响按钮内联元素排版 - 按钮用了
display: inline-block且有换行/空格，产生幽灵空白间隙 - 重置了
margin或vertical-align，造成对齐错位，看起来像“变大”
基本上就这些。核心就一条：加边框前，先写 box-sizing: border-box; —— 不复杂但容易忽略。
立即学习“前端免费学习笔记（深入）”；
