Наследование CSS: что получает дочерний элемент
Наследование позволяет некоторым CSS-свойствам передавать вычисленное значение от родителя к потомкам.
Назначение
Наследование позволяет некоторым CSS-свойствам передавать вычисленное значение от родителя к потомкам.
Как это работает
Цвет текста и многие настройки шрифта обычно наследуются, а внешние отступы и рамки — нет. Ключевое слово inherit явно запрашивает наследование конкретного свойства независимо от его обычного поведения.
Пример
<style>.parent{color:#11694e;border:2px solid;padding:12px}.explicit{border:inherit}</style>
<div class="parent">Родитель <span>обычный потомок</span> <span class="explicit">с собственной унаследованной рамкой</span></div>Что должно получиться
Цвет передаётся обоим потомкам, но рамка появляется у второго только после явного inherit. Наследованное значение становится правилом для самого потомка, а не частью рамки родителя.
Граница применения и частая ошибка
Не путайте наследование с совпадением селектора у нескольких элементов. Также наличие одинакового видимого фона не означает, что background-color был унаследован: фон может просто просвечивать.
Самостоятельная проверка
Задайте родителю цвет и рамку, затем проверьте вычисленные значения у вложенного span. Добавьте border:inherit и объясните появление собственной рамки у потомка.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.