В чем разница между font-size: inherit; и font-size: initial;

В чем разница между {font-size: inherit;} и {font-size: initial; }

Оба значения — inherit и initial — управляют тем, откуда берётся значение свойства font-size, но делают это по-разному.

font-size: inherit;

Означает:

«Возьми значение font-size у родительского элемента и используй его здесь».

Это наследование от ближайшего родителя по дереву DOM.
Поведение аналогично тому, как font-size работает по умолчанию для большинства текстовых элементов (например,

, и т.д. наследуют размер шрифта от родителя).

<div style="font-size: 20px;">
  <p style="font-size: inherit;">Текст будет 20px</p>
</div>

font-size: initial;
Означает:

«Сбрось font-size до его начального (базового) значения по спецификации CSS».

Для font-size начальное значение — medium, что эквивалентно 16px в большинстве браузеров (но зависит от настроек пользователя).
Это игнорирует всех родителей и сбрасывает к «абсолютному нулю» по стандарту CSS.

<div style="font-size: 32px;">
  <p style="font-size: initial;">Текст будет ~16px, НЕ 32px!</p>
</div>

initial я хочу чтобы был 15px

В CSS initial — это фиксированное значение по спецификации, и для font-size оно всегда равно medium, что в браузерах почти всегда = 16px (но может отличаться, если пользователь изменил настройки).

Вы не можете переопределить initial, чтобы он стал 15px. Это запрещено стандартом.

guest
Закрыть меню