Properties that can and cannot be inherited in CSS

Non-inheritable: display, margin, border, padding, background, height, min-height, max-height, Width, min-width, max-width, overflow , position, left, right, top, bottom, z-index, float, clear, table-layout, Vertical-align, Page-break-after, Page-bread-before and Unicode-bidi.

Less than inheritance: This means that a child node cannot inherit the attributes of the parent node, such as:

<div style= "border:1px solid #ff0000;" > This is the parent node    <p>         This is a child node    </p></div>

The effect is as follows:

If a child node can inherit the parent node's border property, there will also be a red border.

All elements can be inherited: visibility and cursor. Inline elements can be inherited: Letter-spacing, Word-spacing, White-space, line-height, color, font, font-family, Font-size, Font-style, Font-variant, Font-weight, Text-decoration, Text-transform, direction. Block elements can inherit: Text-indent and Text-align. List elements can be inherited: List-style, List-style-type, List-style-position, List-style-image. Table elements can be inherited: Border-collapse.

Conversely, inheritable is the parent node setting this property, the child node can inherit his properties,

Here to understand what is a block element, inline element.
The block element, which is the default value of block for the display of its properties, is div,p,h1 and so on, but does not mean that the tag must be a block element, and when the programmer changes his display property, it is not a block element, for example:

<div style= "border:1px solid #ff0000; width:400px; padding:10px; " > This is a blocky element </div><div style= "border:1px solid #ff0000; width:400px; padding:10px; " > This is also a block element </div>

The effect is as follows:

　

If, however, the display of one of the div is set to inline, it becomes:

PS: inline element, width, and height properties are not effective.
Look again at the example:

<span style= "border:1px solid #ff0000; width:400px; padding:10px; " > I am an inline element </span><span style= "border:1px solid #ff0000; width:400px; padding:10px; " > I'm also inline element </span>

The effect is as follows:

When we set one of the display to block, we will have:

Obviously, a tag is not necessarily a block element, and when his display property is set, it will change him.
One thing to note is that when the originally inline element is set to float, it becomes a block element, putting the "I is an inline element, set to Float:left, the effect as:

Do you see a little different, and two is a block element, there is a difference. Not discussed here.

Understand what is a block element, will be what the note can inherit what properties, what note cannot, there will be a recognition, here is the last example, some people are easy to ignore the inheritance of attributes:

<div style= "TEXT-INDENT:2EM; border:1px solid #ff0000; width:400px; " > This is a class of block scholar <div style= "border:1px solid #060" >    This is a two-level block element, which is a prominent effect, no other meaning, Balabarabalabala Balabarabalabala Barabala Barabala <p style= "border:1px solid #0000ff" >    This is a three-block scholar    <span style= " Background-color: #333; Color: #ffffff; " >        This is inline element        </span>    </p>    </div></div>

　　

Text-indent: Text indentation, which is a less-used property, which is how many pixels, or characters, are indented in the first line of a piece of text. It is obvious that it is a text editing property, but some people will use it as a spacing attribute, which is actually very grotesque:
First, you can not guarantee that the text, always have only one line.
Second, a child node defined as Text-indent is a block element that inherits this property, but while others accept the CSS you write, most of the time it is not expected that the child node inherits the Text-indent attribute and modifies it.
In order to avoid this unpredictable inheritance, you can use padding instead of text-indent, instead, you find this attribute, feel very novel, for a moment still retain childlike to use.

Original reproduced from Http://blog.163.com/[email protected]/blog/static/170468853201326421822/

Properties that can and cannot be inherited in CSS