css - 如果都设置为 1em，为什么 div 的文本和按钮的文本大小不同？

Question

当两者都设置为 1em 时，为什么按钮的文本大小大于 div->span 的文本大小？我怎样才能使它们呈现相同的大小？ 现在 firefox 显示 div 的文本为 17px 高，按钮文本为 20px。

.selectDateRangeBtn {
    font-size: 1em;
    text-align: center;
    display: inline;
}

#searchRangeControl {
    font-size: 1em;
    display: inline;
}

    <div id="searchRangeControl" >
        <i class="fa fa-calendar"></i>&nbsp;<span>Some text</span> <i class="fa fa-caret-down"></i>
    </div>

    <button class="selectDateRangeBtn">2019-01-01</button>

Answer 1

font-size 相同，但按钮具有由用户代理设置的默认 font-family，这与您的 div 不同。

使用相同的font-family(重置font属性)，您将拥有相同的字体大小

.selectDateRangeBtn {
    font:initial; /* reset the font */
    font-size: 2em;
    text-align: center;
    display: inline;
}

#searchRangeControl {
    font-size: 2em;
    display: inline;
}

<div id="searchRangeControl" >
        <i class="fa fa-calendar"></i>&nbsp;<span>2019-01-01</span> <i class="fa fa-caret-down"></i>
    </div>

    <button class="selectDateRangeBtn">2019-01-01</button>