Какие CSS-свойства наследуются, а какие нет
Что проверяют
Понимаете ли вы логику наследования, а не список наизусть: наследуется в основном то, что относится к тексту, и не наследуется то, что описывает сам блок. Следом обычно спрашивают про inherit, initial, unset и про поведение кнопок и полей формы.
Как отвечать
Сформулируйте правило и подкрепите примерами:
- наследуются: всё, что касается текста,
color, свойстваfont-*,line-height,letter-spacing,text-align,text-indent,text-transform,white-space, а такжеvisibility,cursor,list-style,direction. CSS-переменные тоже наследуются по умолчанию; - не наследуются: блочная модель и позиционирование,
margin,padding,border,width,height,background,display,position,z-index,overflow,opacity,transform,box-shadow, свойства flex и grid.
Управлять наследованием можно ключевыми словами: inherit берёт значение родителя, initial возвращает начальное значение из спецификации, unset ведёт себя как inherit для наследуемых свойств и как initial для остальных, revert откатывает к стилям браузера. all: unset сбрасывает всё разом. Для CSS-переменной наследование отключается через @property с inherits: false.
Две детали отличают сильный ответ. Наследуется вычисленное значение: line-height: 1.5 передаёт детям множитель, а line-height: 1.5em уже готовые пиксели от шрифта родителя, и крупный заголовок внутри получит слишком тесную строку. И второе: button, input и select не подхватывают шрифт страницы из-за стилей браузера, поэтому в сбросе стилей пишут font: inherit.
Где спотыкаются
Считают, что background наследуется, потому что фон родителя «виден» у ребёнка. На самом деле у ребёнка transparent, и сквозь него просто просвечивает родитель.
С opacity та же ловушка: значение не наследуется, но полупрозрачность применяется ко всему поддереву, и ребёнок с opacity: 1 непрозрачнее родителя не станет.
Путают initial и «значение по умолчанию в браузере»: display: initial у div даёт inline, а не block, потому что начальное значение берётся из спецификации свойства, а не из стилей браузера.