CSS
наследование

Синтаксис

• свойство: inherit;

Автоматическое наследование

Наследование основополагающего механизма CSS, с помощью которого вычисляемые значения некоторых свойств элемента применяются к его «детям». Это особенно полезно, если вы хотите установить глобальный стиль для своих элементов, а не устанавливать указанные свойства для каждого элемента вашей разметки.

Обычными свойствами, которые автоматически наследуются, являются: font , color , text-align , line-height .

Предположим, что следующая таблица стилей:

#myContainer {
  color: red;
  padding: 5px;
}

Это применит color: red не только к элементу <div> но также к элементам <h3> и <p> . Однако из-за характера padding его значение не будет унаследовано от этих элементов.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

Принудительное наследование

Некоторые свойства автоматически не унаследованы от элемента до его «детей». Это связано с тем, что эти свойства обычно являются уникальными для элемента (или выбора элементов), к которому применяется свойство. Обычными такими свойствами являются margin , padding , background , display и т. Д.

Однако в любом случае желательно наследование. Чтобы достичь этого, мы можем применить значение inherit к свойству, которое должно быть унаследовано. inherit значение может быть appied для любого свойства CSS и любой HTML - элемент.

Предположим, что следующая таблица стилей:

#myContainer {
  color: red;
  padding: 5px;
}
#myContainer p {
  padding: inherit;
}

Это применит color: red для обоих элементов <h3> и <p> из-за наследования свойства color . Тем не менее, элемент <p> также наследует значение padding от его родителя, потому что это было указано.

<div id="myContainer">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>