Skip to content

Different logics behind heights and widths in CSS

Published on in CSS and CSS for JS Devs course

height and width work somewhat differently in CSS. height looks "down" the tree whereas width looks "up" the tree.

Full quote:

height tends to look "down" the tree, to determine its size based on the natural size of its contents, while width tends to look "up" the tree, basing its size on the space made available by the parent.

The quote is from Josh W Comeau's CSS for JavaScript developers course (Module 1).

I don't know if the quote makes sense on its own (without more context). But I thought it describes the difference between height and width very clearly yet succinctly, so I wanted to share it here.