In Chrome DevTools I noticed one thing, which I cannot understand. If I set only width and height to a body in CSS - then div doesn`t inherited any property.
body {
width: 100%;
height: 100%;
}<body>
<div>
text
</div>
</body>In this case in DevTools we can see - div doesn`t have any inherited properties from body. But if I add font-size to a body - div inherited font-size, width and height property.
Help me to understand, what is going on?
CSS properties are either inherited or not. width is not inherited. font-size is. For information on inheritance, see this MDN page.
The MDN page for each CSS property, such as this one for font-size, will tell you whether the property is inherited or not.
Hence, applying font-size to body will cause (by default) child elements to have that same size. In contrast, applying width to body will not apply that width to the children (which would not make any sense).
The width and height values are set to auto by default. If you want to use the height applied in your parent to the child then you need to explicitly inherit them:
body{
height: 100%;
}
body > div{/*otherwise, it was auto height*/
height: 100%; /*Or, inherit*/
}
From the w3c the width and height are defined inherited to NO.
You can see the list of properties that are inherited in css here and here in other SO answer.
azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, list-style-image, list-style-position, list-style-type, list-style, orphans, pitch-range, pitch, quotes, richness, speak-header, speak-numeral, speak-punctuation, speak, speech-rate, stress, text-align, text-indent, text-transform visibility voice-family volume white-space widows word-spacing
