Why the button's text size is bigger than div->span's text size when both is set to 1em? How can I make them rendered to the same size? Now firefox shows me the div's text as 17px high and 20px for the button's text.

.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>

1 Answers

1
Temani Afif On Best Solutions

The font-size is the same but the button is having a default font-family set by the user agent which is different from your div.

enter image description here

Use the same font-family (reset the font property) and you will have the same text size

.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>