设置box-sizing:border-box后链接按钮高度仍为34px而非32px的问题

核心问题 #

你没给链接按钮设置明确的高度值，且对box-sizing: border-box的作用逻辑理解有偏差：
当元素没有固定高度时，它的高度由内部内容+padding撑开（这里是24+8=32px），此时给元素加border，border-box不会把border“压缩”进已撑开的高度里，而是会在这个基础上叠加border的宽度，最终总高度变成32+2=34px。

修复方法 #

方法1：给按钮设置固定高度（推荐）

直接给链接按钮设置height: 32px，同时确保box-sizing: border-box应用在按钮上，这样border和padding都会被包含在32px的高度范围内，内部元素可以通过调整尺寸或居中适配：

/* 链接按钮样式 */
.link-btn {
  box-sizing: border-box;
  height: 32px;
  padding: 4px;
  border: 1px solid #ccc; /* 上下各1px，总border高度2px */
  display: inline-flex; /* 用来居中内部元素 */
  align-items: center;
}

/* 内部块元素样式 */
.link-btn .inner-block {
  width: 24px;
  height: 24px;
}

方法2：调整内部元素高度

如果不想设置固定高度，可以把内部元素高度设为22px，让内部元素高度 + padding + border = 32px（22+8+2=32），但这种方式灵活性较差。

额外检查

用浏览器开发者工具查看按钮元素的计算样式，确认box-sizing确实是border-box，避免被其他优先级更高的CSS规则覆盖（比如全局的* { box-sizing: content-box; }）。

内容的提问来源于stack exchange，提问作者saerts