HTML/CSS中未设margin与padding的大字号h2上下空白的成因及消除方法

空白产生的根源 #

你观察到的、和font-size正相关的空白，完全不是手动设置的padding或margin导致的，是两个浏览器内置排版规则共同作用的结果：

• 第一是默认行高的比例计算规则：所有文本类元素的浏览器默认line-height为1.2倍的字号值，这个计算值会随font-size等比例放大。比如你设置80px的字号，对应的实际行高就是80px * 1.2 = 96px，比文字本身的字形高度多出的部分，会被均匀分配到文字的上下两侧，填充在行盒和文字边缘之间，自然就形成了你看到的灰色背景内部的空白。这也是为什么字号越大，这个空白的绝对值越大。
• 第二是网页默认字体的字形设计预留：哪怕把行高设到和字号完全相等，Arial这类无衬线字体本身为了保证字符排版不出现视觉裁切，会在实际字形的像素边界和行盒边界留少量设计空隙，这部分空隙同样是跟随字号成比例变化的。

注意：h2标签本身的默认上下margin是元素外部的间距，不会出现在你设置的灰色背景内部，所以它不是你当前看到的空白的来源。

空白消除的实操方法 #

根据视觉效果需求选对应调整方式即可：

• 核心调整：直接给h2设置line-height: 1，让行盒高度和字号完全相等，去掉默认1.2倍行高带来的额外上下空间，这一步就能消掉绝大多数你看到的和字号相关的空白。
• 微调适配：如果改完line-height:1之后，还是能看到字体和背景边缘有微小缝隙，可以根据实际视觉效果把line-height调到0.9~0.95之间，抵消字体本身的设计预留空隙，直到文字和上下背景边缘完全贴合。
• 附加调整：如果需要去掉h2标签自身默认的外部上下间距，可以额外加上margin:0，这个操作只影响元素和周围其他内容的距离，不影响背景内部的空白。

可直接测试的修改后代码 #

h2 {
    font-size: 80px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(100, 100, 100);
    line-height: 1; /* 核心消除背景内空白的样式 */
    margin: 0; /* 消除h2默认的外部上下间距 */
}

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