使用em单位为h5标签设置padding时计算值不符合预期的问题

核心原因 #

em单位的计算基准是当前元素自身的字体大小，而非父元素的字体大小。

浏览器对<h5>这类标题标签有默认的字体样式（包含font-size），你仅给父元素#myDiv设置了font-size:32px，但未覆盖<h5>自身的默认字体大小，所以padding:1em是按<h5>默认字体大小（约13.28px）计算的。而<div>/<section>没有浏览器默认的特定字体大小，会自动继承父元素的32px，因此使用em时表现符合预期。

解决方法 #

有两种实用方案：

• 方案一：显式让<h5>继承父元素的字体大小

#myDiv h5{
    background-color: red;
    color: white;
    font-size: inherit; /* 继承父元素的32px */
    padding: 1em;
}

• 方案二：改用rem单位（相对于根元素<html>的字体大小）
  如果根元素用默认16px字体，可先调整根元素字体大小，或直接计算对应rem值（比如2rem等价于32px）：

html{
    font-size: 32px;
}
#myDiv h5{
    background-color: red;
    color: white;
    padding: 1rem; /* 此时1rem等于32px */
}

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