Не все свойства CSS ведут себя одинаково по отношению к вложенным элементам. Часть из них наследуется от родителя автоматически, а часть — нет, и путаница вокруг этого поведения встречается на удивление часто даже у тех, кто уже неплохо разбирается в стилях.
Текстовые свойства обычно наследуются: если задать цвет текста или семейство шрифта на body, все вложенные элементы получат эти значения автоматически, если только для них явно не задано другое. Это удобно — не приходится дублировать одни и те же настройки шрифта на каждом отдельном элементе страницы.
А вот свойства оформления блока — фон, границы, отступы — не наследуются вовсе. Логика здесь понятная: если бы граница родителя автоматически появлялась у всех его потомков, страница быстро превратилась бы в нечитаемый набор рамок одна внутри другой.
Ключевое слово inherit заставляет свойство принудительно унаследовать значение от родителя, даже если по умолчанию оно не наследуется. Это редко нужно в повседневной вёрстке, но иногда выручает в нестандартных ситуациях, когда важно, чтобы конкретный элемент точно повторял, например, цвет границы своего контейнера.
Понимание наследования особенно полезно при настройке базовых стилей всего проекта — гораздо разумнее задать шрифт и цвет текста один раз на body, чем повторять эти же значения на каждом отдельном блоке страницы.
Список наследуемых и ненаследуемых свойств по умолчанию можно свериться в спецификации, а понятное объяснение с примерами — в разделе про наследование на MDN.
Ключевые слова inherit, initial и unset управляют наследованием точечно, для конкретного свойства на конкретном элементе, когда автоматического поведения браузера недостаточно. На практике они нужны нечасто, но полезно знать, что такой инструмент вообще существует, когда встречается нестандартная задача.
