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

Question

为什么按钮的文字大小比 div->span 的文字大小都设置为 1em 时大？我怎样才能使它们呈现相同的大小？现在 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>

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

Why div's text and button's text size differ if it both are set to 1em?

css

button

font-size