header高度不稳定的根本原因是盒模型（box-sizing）与行内元素对齐方式混用所致；应统一设box-sizing: border-box、用flex垂直居中、为行内元素显式设置vertical-align，并在响应式中同步调整height与padding。
header 高度忽高忽低，根本原因是内容撑开或盒模型计算不一致
常见现象是：header 在不同页面或添加文字/图标后突然变高，滚动时还可能抖动。这不是“随机bug”，而是 height、padding、line-height、font-size 和 box-sizing 混合影响的结果。默认的 box-sizing: content-box 会让 padding 和 border 额外增加高度，而文字基线、行内元素的 vertical-align 也会悄悄抬高容器。
用 height + padding 固定视觉高度，但必须配 box-sizing: border-box
只设 height: 60px 不够——如果再加 padding: 12px，实际高度会变成 84px（content-box 下）。正确做法是：
header {
height: 60px;
padding: 12px 20px;
box-sizing: border-box; /* 关键！让 padding 包含在 height 内 */
}-
height定义的是最终渲染高度，不是内容区高度 - 所有子元素（如
h1、nav）建议用display: flex+align-items: center垂直居中，避免依赖line-height抽风 - 慎用
line-height: 60px居中文字——一旦字号变大或换行就失效
字体和行内元素会偷偷改变 header 实际占用空间
哪怕 height 和 padding 固定了，font-family 切换、font-size 微调、甚至一个没设 vertical-align 的 img，都可能让 header 底部多出几像素空白。这是因为行内元素默认按 baseline 对齐，而 baseline 位置随字体变化。
- 给所有行内子元素加
vertical-align: middle或top - 文字容器（如
.logo）用display: inline-flex替代inline-block，更可控 - 临时调试时，在开发者工具里勾选「Show layout shifts」，能立刻看到哪些元素在推高容器
响应式下高度失守？别只改 height，要同步重设 padding
在媒体查询里只写 @media (max-width: 768px) { header { height: 50px; } } 是危险的——如果原 padding 是 12px，现在内容挤进 50px 高，很可能溢出或文字被裁。必须成对调整：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 768px) {
header {
height: 50px;
padding: 8px 16px; /* 同步缩放 padding，保持视觉节奏 */
}
}更稳妥的做法是用 rem 或 clamp() 统一控制基准，比如 padding-block: clamp(0.5rem, 2vh, 1rem)，但初学项目优先保证固定值的一致性。
真正难的不是设个 height，而是意识到：只要有一个子元素没被显式约束（比如浮动未清除、行内元素未设 vertical-align、字体加载导致重排），固定高度就会失效。检查时从子元素开始，而不是盯着 header 标签本身。
