Inheritance in CSS properties
Here, In this example I have two divisions where one is nested within another. I’m calling the outer division a parent and the division which is nested a child.
It looks like this in the web browser:
My question is: How does the child div tag gets the size of it’s width? Is it because of inheritance from the parent div tag or is it just by default behavior that it will expand up to the parent div container if you don’t specify a width?
Width cannot be inherited. What you are seeing is default behavior.
“Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme.” – W3C
By default, block elements have a width of
100%. That means that if a width isn’t specified, it will be
100% of the parent.
In this case, the parent’s width is
The calculation is based on
The child’s width is exactly
100% of the parents width - minus
jsFiddle here You can play around with it and inspect the elements.