为什么CSS的height加padding后内容区域会变小？

默认content-box下height仅指内容区高度，总高度=height+上下padding+上下border+上下margin；border-box下height包含内容、padding和border，总高度=height+上下margin。

因为 height 默认只控制内容区高度，padding 是额外加在它外面的；除非你主动改用 box-sizing: border-box，否则浏览器不会把 padding 算进 height 里。

height 和 padding 在默认盒模型下怎么算尺寸

浏览器默认用 content-box 盒模型：你写的 height: 100px 指的是内容区（content）高 100px；padding: 20px 会再往上、下各加 20px，总高度变成 140px。内容区本身没变，但被上下 padding “挤”得更窄了——尤其当父容器高度固定时，内容区域可视空间就真变小了。

常见问题表现：

1. 给 <textarea> 设 height: 100px; padding: 12px;，结果文字行距压缩、输入框显得“局促”
2. Flex 容器中子项设了 height: 60px 和 padding: 16px，却撑不满父容器，还出现滚动条
3. 用 max-height 限制弹窗高度，加了 padding 后内容被截断，但开发者工具里显示“高度已超限”

什么时候 box-sizing: border-box 能解决问题

它让 height 表示“总高度”，即 content + padding + border。你写 height: 100px; padding: 20px;，内容区自动缩到 60px 高，整体仍占 100px。

但要注意这些边界情况：

1. height: auto 下 box-sizing: border-box 不改变行为——高度仍由内容决定，padding 只是“内部留白”，不压缩内容
2. 百分比 height（如 height: 50%）依赖父元素高度，而 padding 值是绝对的，两者计算逻辑不同，不能靠 border-box 对齐比例
3. 表格单元格（<td>）、<button> 等原生控件在部分浏览器中对 border-box 支持不稳定，建议单独测试

调试时怎么一眼看出是不是这个原因

打开 Chrome 或 Firefox 开发者工具，选中元素，在 “Computed” 面板搜 box-sizing，确认值是 content-box 还是 border-box；再看 “Layout” 标签页右上角的小图标，它会直接标出当前盒模型类型和各区域尺寸。

如果发现 “Layout Height” 明显大于 “Height” 值，且差值正好等于上下 padding 之和，基本就是它了。

勾选 “Show padding area”，能立刻看到 padding 是否把内容区域压窄、或是否和兄弟元素重叠。

真正容易被忽略的一点

height 加 padding 后内容区域变小，往往不是样式写错了，而是你误以为 height 控制的是“可见区域总高”。其实它默认只管内容，padding、border、margin 全部游离在外——这个前提不扭转，所有微调都是在补漏。全局设 * { box-sizing: border-box; } 是最省力的起点，但得记得排除 input[type="search"] 这类特殊控件，它们在 Safari 中可能表现异常。