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

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>