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

当两者都设置为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>

最佳答案

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>

关于css - 如果div的文本和按钮的文本大小都设置为1em，为什么会不同？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55969932/