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

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

0 голосов
/ 03 мая 2019

Почему размер текста кнопки больше, чем размер текста 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>

1 Ответ

1 голос
/ 03 мая 2019

font-size - то же самое, но кнопка имеет значение по умолчанию font-family, установленное пользовательским агентом, которое отличается от вашего div.

enter image description here

Используйте тот же 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>
...