Seeing elements in CSS way: CSS Box Model

#webdev #beginners #html #css

Human, HTML, CSS are different by nature. They have their own world of purpose & vision. Generally, they don't understand each other. Yet, the modern web is impossible without them.
As it turns out, humans are lucky to have a tribe among them namely, developers. These developers are very empathetic to their non-human counterparts. They know how to see things in other HTML, CSS way.
Let's see how things are different in each of these worlds & how developers cope with it. Hopefully, we'll learn something along the way.

Hold on! Isn't the CSS part is quite abnormal? Why is there a box?
Well, that's because in CSS everything is a box. This convention is known as- CSS Box Model. Let's see what's this all about!
So every element is a box in CSS whether it'd be inline or block one. I hear you saying, a box contains something in real life; what about in CSS world?
It turns out, boxes in the CSS world aren't that different from the human world. They also comprised of certain things. Each box in CSS contains-

Content
Padding
Border
Margin

Before explaining what is what, let's visualize each of them. After all, we humans are visual creatures.

Alrighty! I know! There's nothing about margin on that image.
Margin is actually an out layer. It doesn't have anything to do with the box itself. Rather, when specified, its job is to put whitespace between the box itself and other boxes.
Let's see them in action.
Here we have two elements- Content A and Content B. Having them with background color will make them look like boxes.

Suppose, we wanna increase the size of the box. What do we do? We add some padding. This will put whitespace around the content thus makes the box size bigger. Remember, this doesn't make the content itself bigger rather the box.

To see the border, we can add border property. The border is what wraps the content & padding. Its the CSS way of marking territory for an element. It provides an element sovereignty.

Now to margin! Margin puts whitespace between the boxes. Adding margin-bottom for content A will do the job.

Note, the margin has a feature called margin collapsing. That essentially means only the bigger margin value will count. Say for example, for content A we have margin-bottom: 70px and content B margin-top: 30. You think the margin between them should be 70 + 30 = 100, right? Wrong! Here only the bigger margin value counts. So the margin would be 70.
Cool! So far so good. Now let's play a bit with the size of the box.
If we set the height and width of the boxes to 100px, it'll look something like-

You might think, the whole box size is now 100 X 100 (height X width). CSS will betray you. See the details in browser devtool-

Look! only the content (the blue area in the box) is 100 X 100. That means when we add height, width it applied only for the content. That's a bit weird!
Anyway, let's calculate the size of the whole box from the image above.
width = width of content + padding right + padding left + border right + border left
so in our case,
width = 100 + 20 + 20 + 10 + 10. Thus, width = 160.
Similarly, height = height of content + padding top + padding bottom + border top + border bottom
For us, height = 100 + 20 + 20 + 10 + 10. Thus, height = 160.
So according to our calculation, the size is 160 X 160.
And it is-

So each of our boxes is of size 160 X 160.
By now you are thinking, that's boring. When we specify height, width it should be for the whole box but here in CSS it's only for the content. To determine the actual size, we need to add content height, padding, border size. That is a bit tedious!
You might wish to determine height and width just by declaring the height and width property. I mean, when we declare height: 100 and width: 100, the total box size should be 100 X 100 including the padding, border. This would make life a lot easier.
Turns out there's a way to do so. That's by using the box-sizing property. Just add something like-

element {
box-sizing: border-box
}

Ahh!! Now take a deep breath.😤🤣 We are done! But before you go, remember to practice what you've just learned. And if stuck then I would be happy to help😉
I hope now you have a bit of ground on CSS box modeling. Have fun and keep learning.😎
Oh the cover image is taken by Matteo Kutufa from unsplash.com