自定义Header与目标网站Header高度设置相同却显示不一致的原因排查求助

嘿，这个问题我之前帮好几个开发者捋清楚过，看似设置了一样的高度值，实际视觉效果却有差异，大概率是这些容易忽略的CSS细节在搞鬼：

• 盒模型规则不统一：目标网站的元素可能用了box-sizing: border-box（高度包含内边距和边框），而你的元素默认是content-box（高度仅指内容区）。举个例子：如果目标span设置height: 40px; box-sizing: border-box; padding: 5px 0，实际视觉高度还是40px；但你的span没加box-sizing，同样设height:40px再加padding:5px 0，实际高度就变成了50px，自然不一样。
• 行高（line-height）的隐形撑开：如果你的span是行内元素，line-height会直接影响它的实际占位高度，哪怕你设置了height属性。比如目标网站的span把line-height设得和height完全一致，而你的span用了默认的line-height:1.5，那哪怕height数值相同，实际视觉高度也会被行高撑开。
• 内边距/外边距的差异：你可能只盯着height属性，但目标网站的span可能加了上下方向的padding或margin，这些都会让元素的整体视觉高度增加。比如目标span有padding: 6px 0，你没加的话，就算height一样，整体高度也差了12px。
• 字体属性的细微差别：字体族（font-family）、字体大小（font-size）、字重（font-weight）都会影响元素高度。比如目标用了Helvetica，你用了PingFang SC，不同字体的字形高度天生有差异；就算font-size相同，font-weight:bold的字体也会比常规字重稍微“撑高”一点。
• 浏览器默认样式的干扰：不同浏览器对元素的默认样式有区别，比如有的浏览器会给span默认的line-height或微小的margin。目标网站可能用了CSS重置（比如normalize.css）统一了默认样式，而你没做，导致默认样式叠加后高度不一致。
• 定位与父元素的影响：如果目标网站的Header或span用了position: absolute/fixed，而你的用了默认的static，高度计算逻辑会不一样。另外，如果目标Header是flex容器，设置了align-items:center，而你的不是，span的垂直对齐方式不同，视觉上也会显得高度不一样。
• 伪元素的隐藏占位：目标网站的span可能加了::before或::after伪元素，这些伪元素如果设置了高度、padding或其他占位样式，会让整个span的视觉高度变大，而你没加伪元素，自然高度不匹配。

至于你说复刻Stack Overflow和Facebook时没遇到这个问题，大概率是因为这两个网站的Header结构相对简洁，或者你在复刻过程中无意中统一了上述这些细节（比如用了相同的盒模型、行高），而当前目标网站的Header有更多隐藏的样式细节没被注意到。

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