CSS Box Model

Margin, padding, border, content… If you worked on CSS even just a little bit, you must’ve heard of these terms. Today, I’ll dive deeper into CSS box model and talk about margin, padding, border and content. If you’re learning about layout in CSS then box model is one of the first things you need to learn. It’s not a choice, it’s a necessity. So, what really is the box model? To put it short, it’s pretty much a box that wraps around every single HTML element but that doesn’t really explain too much, does it? Well, let’s look at an image I made to illustrate what I mean:

This is a quick drawing and isn’t meant to be perfect. Let’s break it down:

• Content: This is the content of your element. This could be an image, a paragraph, a header, anything really.
• Padding: This is pretty much spacing around your content. It’s between the border and content. Assume that you have a button element and the spacing between the border and content are too small, you could play around with the padding values.
• Border: As the name suggests, it’s a border that wraps your padding and content. We’ll illustrate each property and it’ll be a lot clearer.
• Margin: Newcomers mix padding and margin often because both are used for spacing. This all boils down to practice but to put it short, margin is used for spacing around your element. Assume that you have 2 images side by side and you want them to be x pixels apart from each other, you’d have to play around with the margin values to push them apart. This will be a lot clearer once we move onto examples.

However, let’s talk about different types of boxes first. We have inline boxes and block boxes. These boxes behave in different ways, however, the biggest difference between them is the fact that block boxes break onto a new line while inline boxes don’t. There are a lot more differences between block boxes and inline boxes but I won’t cover every single difference in this article. However, if you’re interested in the difference between them, this article by MDN Web Docs can definitely help.

Padding

Content is pretty self-explanatory so I won’t waste your time. Let’s see what we can do with padding though. Let’s work on a very basic button element.

It looks like this on my browser:

Okay, I don’t like the spacing between my border and my content which is pretty much just “Click me!” Let’s create a new CSS file and add it to our HTML file. We could also use inline css or internal css but common best practice is to use external css. I added my CSS file like so:

In this CSS file, all I did was add padding to our button element like so:

Common best practice is to write our padding values in a clockwise motion. So you should be going from top to right to bottom and finally to left. You’ll understand why that’s important soon. Let’s check our button again:

Okay, that’s not the prettiest looking button in existence but that illustrates what padding does clearly. It adds spacing between our border and content. Do you really have to type 4 different lines of code to add padding though? Not really! There’s a padding shorthand value. Remember what I said earlier? Values are written in a clockwise motion. So let’s assume that I want to add 8px top padding, 15px right padding, 5px bottom padding and finally 10px left padding. I’d have to write something like this:

Easy enough, right? But it doesn’t end there! Our button looks even worse now:

It’s because our edges aren’t even to begin with. It looks odd. It’d be a lot better looking if top-bottom had the same spacing and right-left had the same spacing, right? Thankfully we have one more shorthand value for exactly that! Let’s make it so that our top-bottom padding is 10px and our right-left padding is 15px.

And our button looks a lot better now as well:

Border

For border and margin, we’ll work on 2 different boxes. Let’s add our boxes to our HTML file. In order to add our boxes, I’ll use Emmet. You should definitely look Emmet up if you want to speed up your HTML:

It results in this:

Okay, time for some CSS.

Let’s check our browser.

Perfect. There’s no spacing between our boxes because there’s no margin defined right now. I only added 2 boxes to show you what our elements look like without any margin. Let’s get rid of the green box for now, we’ll bring it back for margins. I’ll simply comment it out.

Okay. Let’s add some content to our element as well. I’ll simply add a white coloured text. I’ll also center the text so we have at least some content.

We’re finally ready for borders. Let’s add a 10px solid black border around our box. It’ll be ugly and big but it’ll show what border does clearly.

As you can see, it added a border that wraps around our padding and content. It didn’t interfere with our padding or our content. There are different border properties but borders could be an article on its own so I won’t go into too much detail on that. Instead, I’ll leave you with a few resources.

Margins

For starters, we need to bring our green box back and get rid of our black border. I’ll also get rid of the content so both boxes are similar. So let’s do that.

Perfect. Now, these boxes are stacked on top of each other. So we could add a margin-bottom to the red box or margin-top to the green box. Let’s add 50px of margin-bottom to the red box.

As you can see, it added spacing around the element itself and pushed our green box away. There’s one thing to watch out for though, if you added margin-bottom: 50px; to the red box and margin-top: 50px; to the green box, you’d expect the overall spacing to be 100px, right? Well, let’s see what happens.

Wait, that’s the same as before. Even if you use inspect element, you’ll see that the red box has a margin bottom of 50px and the green box has a margin top of 50px so what’s going on here? Well, once you give a margin-bottom of 50px to the red box, there’s a margin of 50px between these elements anyway. This is known as margin collapsing. However, if you added a margin-top of 100px to the green box, it’d be pushed away by 50px once again. Margin also has the same shorthand property as padding. You can simply do:

And that adds 10px of top-bottom margin and 50px of right-left margin like so:

Height and width

If you manually set the height and width of your elements like we did for our boxes, you set the height and width of the content area of your element and not the entire element. You can easily calculate the entire height and width of your element though. To do so, you need to add the content, borders, margins and paddings. Let’s calculate the total height and width of the following box:

Okay, let’s start with the height. 200px is the height of our content, we have 10px of top and bottom paddings so that’s 20px in total, we have 5px of top and bottom margins so that’s 10px in total and finally we have 2px of top and bottom borders so that’s 4px in total aaand that’s 234 px total. So that’s our total height. And for width, you repeat the same process. 200px width, 40px padding, 20px margin and 4px border so it’s 264px in total. So our element is 264x234 pixels in total. Okay, but that’s too much work. Well, that’s exactly why CSS introduced an alternative CSS box model and to use it you simply do:

Now, the actual width and height are 200px. That seems pretty useful, doesn’t it? But isn’t it a waste of time and effort if I need to constantly write box-sizing: border-box; for every single ruleset? What happened to not repeating the same code over and over again? Well, you can inherit box-sizing!

This enables you to use box-sizing: border-box for every single element in your CSS file unless specified otherwise. Pretty cool, right? This sums up what I have in mind for CSS box model! Thanks for reading.

If you’d like to add something I missed, leave a comment down below. See you next time.