The default height and width of empty div in CSS

The height and width CSS properties are not inheritable. If not specified, their default value is “auto” which means “browser will calculate it“. But how does the browser calculate the size of a <div> that has no content in it? what is the actual height and width for an empty <div>? In fact, the actual width of empty <div> is the width of the containing element. The actual height of empty <div> is 0. I thought the size of an empty <div> is the size of its parent, i.e., the child occupies the whole area of its parent. This is proved to be wrong.

The calculation for height is a little tricky if you use a percentage value for it. It is calculated according to the height of the containing element only if the containing element has an explicit height value. The explicit value can also be a percentage value which requires the containing element’s parent also has an explicit value, this continues up to the root <html> . If the root <html> has also a percentage height value, its actual height is calculated according to the height of browser’s window. If any of the predecessors does not have an explicit height value, the height of the element in question will be calculated according to the actual content contained in it, regardless of the percentage CSS height value. So for empty div, the final height would be 0 even there is a percentage height.

Did you like this?
Tip admin with Cryptocurrency