Значення властивості css inherit

Ще одне значення властивостей css, з яким можна часто стикатися при роботі зі стилями CSS - це значення inherit.

Давайте подивимося, який сенс і ефект дає це значення.

inherit з англ. перекладається як наслідувати. Властивості, яким буде присвоєно це значення, будуть наслідувати значення того-ж властивості його батька.

У цьому прикладі, хоча дочірньому блоку не було задано жодного конкретного значення для властивості border, значення inherit запозичило параметри цієї властивості у свого батька.

Але, в CSS є також ряд властивостей, які автоматично запозичують значення відповідного властивості його батька. Наприклад, це властивість color:

Подивіться, хоча дочірньому блоку не було присвоєно властивості color, проте, текст в дочірньому блоці теж став червоним кольором.

Таким чином, в CSS є ряд властивостей, які успадковують властивості своїх батьків і є такі властивості, які не успадкують.

Щоб дізнатися які саме властивості успадковують, а які ні, можете подивитися на наступну таблицю:

Це офіційний список всіх властивостей CSS, який представлений в специфікації.

Зверніть увагу на графу Inherited

Yes - означає, що властивість за замовчуванням успадковується у свого батька.

No - властивість не успадковується у батька.

Таким чином, значення inherit - це спосіб змінити те, як властивостей CSS в області успадкування, яке використовується за умовчанням.