Почему текст div и размер текста кнопки отличаются, если они оба установлены на 1em?

Question

Почему размер текста кнопки больше, чем размер текста div-> span, когда для обоих установлено значение 1em? Как я могу сделать их одинаковыми по размеру? Теперь Firefox показывает мне текст div как 17px high и 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>