What are CSS property inheritance? Summary of inheritable and non-inheritable properties in CSS

Inheritance means that HTML elements can inherit a subset of CSS properties from the parent element, even if the current element does not have the attribute defined. So, what properties of CSS can inherit and which properties cannot inherit? Let's take a look at the contents of the property inheritance in CSS.

First, let's take a look at CSS precedence:

!important > Inline style > ID selector > class selector > tags > wildcard > Inherit > Browser Default properties.

Common CSS properties that are not inheritable

Display: Specifies the type of box that the element should generate

Text-decoration: Specifies decorations added to the text

Text-shadow: Text Shadow Effect

White-space: processing of whitespace characters

Properties of the box model: width, height, margin, border, padding

Background properties: Background

Positioning properties: Float, clear, position, top, right, bottom, left, Min-width, Min-height, Max-width, max-height, overflow, clip, Z-index

Common CSS Inheritable properties:

Font: Combining fonts

Font-family: Font family of specified elements

Font-weight: Setting the weight of a font

Font-size: Setting the size of the font

Font-style: Defining the style of the font

Text-indent: Text Indent

Text-align: Horizontal alignment of text

Line-height: Row Height

Color: Text Colors

Visibility: element Visibility

Cursor Properties: Cursor

All elements can inherit the

1. Element Visibility: Visibility

2, cursor properties: Cursor

Properties that can be inherited by inline elements

1. Font family Properties

2. Text Series properties except Text-indent, Text-align

Properties that block-level elements can inherit

Text-indent, Text-align

Inherit (inheritance) value

Each property can specify a value of "inherit", that is, the value of the property and the computed value of its parent element's relative property for the given element. An inherited value is usually used only as a fallback value, and it can be enhanced by explicitly specifying "inherit", for example:

p {font-size:inherit;}

Limitations of inheritance

While inheritance reduces the hassle of repeating definitions, some properties cannot be inherited, such as border (border), margin (margin), padding (padding), and background.

This setting makes sense, for example, to set a border for a <p>, and if this attribute is inherited, then all the elements in this <p> will have a border, which will undoubtedly produce a dazzling result. Similarly, attributes that affect the position of an element, such as margin (margin) and padding (padding), are not inherited.

Also, the default style of the browser affects the inherited results. For example:

body {font-size:12px;}

The text of the

This is because the default style of the browser sets the CSS rules for

At the same time, some older browsers may not be able to support inheritance, for example, some browsers will lose all inherited properties when they encounter <table>.

Once a CSS property is inherited and cannot be canceled, only the style can be redefined.

Related articles recommended:

CSS inheritance element Properties _html/css_web-itnose

How property value inheritance in CSS is used

Introduction to property value inheritance in CSS