Today I learned
Width and Height in CSS
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 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