DEV Community

Cover image for Seeing elements in CSS way: CSS Box Model
Anik Khan
Anik Khan

Posted on

Seeing elements in CSS way: CSS Box Model

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.
Alt Text
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-

  1. Content
  2. Padding
  3. Border
  4. Margin

Before explaining what is what, let's visualize each of them. After all, we humans are visual creatures.
Alt Text
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.
Alt Text
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.
Alt Text
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.
Alt Text
Now to margin! Margin puts whitespace between the boxes. Adding margin-bottom for content A will do the job.
Alt Text
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-
Alt Text
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-
Alt Text
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-
Alt Text
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
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
dkrest1 profile image
Oluwatosin Akande

Nice write-up

Collapse
 
akdeberg profile image
Anik Khan

Glad that you see it that way๐Ÿ™‚ Thanks for taking the time to drop a nice comment