Tech, Tutorials

Understanding The Box Model

When you’re browsing the internet, you could think of each piece of content featured on each page as a box.

In fact if you were to take this a step further and put a border around each individual item on your page, you’d come to notice that they would now each be sitting inside a rectangular box. The term that describes this in more detail is known in CSS as the “Box Model.” And, although sometimes confusing at first, once you break down the box model and understand how it works, it gives you much more power over your websites when you are creating them, so let’s dive into this, and unlock the power of the box model.

Picture it like this, say you have a paragraph on your site, that paragraph is classed as the content. Now in other cases, the content would change, it could instead be an image you’ve decided to showcase on your homepage, or even a main form which allows users to enter information and sign up, but regardless of what exactly it holds, this is always known as the content. Below I’ve added an example image, containing our paragraph with the background set to purple so you can see this in action.

Around this content, that is where padding comes into play, it does happen to be transparent but once I show another screenshot you will see what I’m talking about. Now the padding exists between the content and the border, and what it does is it makes space around your content. Let’s see what happens when I add 20px of padding to our paragraph element.

It literally makes all the more difference when you bring padding into the equation, just look at how much space we now have surrounding our text. Now our border which comes into the equation next, this exists around our content and our padding, here’s another example:

The lighter purple represents of course, our border. These can come in handy if you want to showcase something on your page or even add some type of decoration to an element. Lastly we have the margin. The margin is the space that is around our element, it’s not inside, and does not add to the content spacing, but has the official task of being able to push things away from one another and create space. So I’m going to add 50px of margin to our element, and although you can’t see my whole page, what I’ve previously taken screenshots of is the element at the top of the page, so let’s look at what happens when I add 50px of margin and then 100px.

You can really tell the difference that 100px makes compared to 50px because of how far the element is now pushed down the page. So, summing it up that is a really straight forward break down of the Box Model. Now as for using it in your CSS, the border is pretty straight forward but when it comes to the padding and margin, you have the ability to either use one size which then changes the top, right, bottom and left values to the same size, or you can specify each size setting in that order, first stating the top, then right, the bottom, then left. Below I’ve posted one last example of how you could do this with margin.

With this, you could also cut the margin down to 50px 20px, eliminating the other two values, because as you can see our top value is the same as our bottom and our right value is the same as the left. That’s a shorthand way to express those sizes if the top and bottom match and the left and right match.

Now I could probably carry this on for awhile longer but I’m going to wrap it up there, if you have any questions, don’t hesitate to write them in the comments section ^_^!

Leave a Reply