Today I learned

Width and Height in CSS

Edit this Post Opens in new tab

There is a fundamental difference in how width and height work in CSS. I recently stumbled over this blog post Width and Heigh in CSS Opens in new tab by Jim Nielsen in which he talks about the topic. He cites, that he got a great explanation from Josh in his video Secret mechanisms of CSS Opens in new tab.

To determine the width of an element, the browser looks up the DOM tree and to determine the height of an element, the browser looks down the DOM tree.

What does that mean?

If you set an element to width: 100% it will take the width of its parent. So it's easy to tell an element to take the full width of the page for example.

But height does not work the same way. A lot of developers don't understand that setting an element to height: 100% will not make it take the full height of its parent. It will take the height of its content. So if you have a div with a p inside, the div will only be as high as the p is.

To be honest, I sometimes still use height: 100% and then wonder why it's not working. But now I know why and I hope you do too.

I hope you enjoyed this post and learned something new. If you have any questions, feel free to reach out to me on Twitter Opens in new tab or via Email Opens in new tab.

If you want to support me, you can buy me a coffee. I would be very happy about it!

☕️ Buy me a coffee ☕️

I wish you a wonderful day! Marco