Understanding the CSS Box Model

Webpages are made up of many tiny little boxes? Really? How does that work?

That’s right, the web isn’t a square, man, it’s a rectangle. Or should I say, a series of rectangles.

Yes we can shape them into circles, and trick users with oddly shape graphics. But short of abandoning HTML in favour of a purely SVG driven website (which is rare and complicated), you’ll need to accept that the internet is nothing but a series of in order or overlapping rectangles.

That’s right, the web has taken up boxing. Not the kind where you hit each other with cushions for hands in the vauge hope your head won’t turn into jelly. But the kind where you place everything into boxes. Boxes are just rectangles of course.

With this in mind, I’d like you to look closely at any website, and try to mentally draw boxes around the elements you see. As you practice this, even the most complicated flowing websites will start to look that way to you.

These boxes come in four different parts, I’ll list these in order.

  • Margin
  • Border
  • Padding
  • Content

The margin is the invisible space around the box, you can set these using left, right, top and bottom values. The higher the value on any, the more space will appear in that direction.

The border is a visible boundary that exists between the margin and the padding. It essentially allows you to draw a box around your content. In CSS there is also an outline rule, but the outline isn’t part of the box model it’s something else. So we’ll ignore that for now.

The padding is the space between the border and the content contained within. The content can be a video, image, application, text, heading and more. It is also controlled by the amount of left, right, top and bottom spacing you apply.

While the border exists between the padding, and margin of the box, it can also be invisible or have a thickness of nothing. If this happens then visually the margin and padding will just merge. So unless you specifically need both, you can use just one of these to attain the same visual effect.

This is the margin
This is the padding This is the border This is the content. The content is wrapped inside the box. The content will not enter the padding.

As you can see from the coded example above we have a cyan square, with a black square in the middle. The space around the black square is the margin. The black square is the border. The space within the square around the “this is the content” message is the padding. The content is the text in the middle.

The code I used to make the example can be seen below.

<div style="background: cyan; height: 300px; width: 100%;">
     <span style="font-weight: 800">This is the margin</span>
     <div style="margin: 25px; border: solid black 16px; padding: 25px; height: 100px; width: 200px;">
          <span style="position: absolute; top: 65px; left: 75px; font-weight: 800;">This is the padding</span>
          <span style="position: absolute; top: 211px; left: 75px; color: white; font-weight: 800;">This is the border</span>
          This is the content. The content is wrapped inside the box. The content will not enter the padding.

     </div>
</div>

I begin with a div element, this acts as the background, so you can see that all the padding is the blue spacing.

Inside I have a second div, this is the important div. It has a style with a margin set to 25px. A px is a pixel. We have a border that is set to a solid line is black and has a thickness of 16px. Then we have internal padding with a pixel with of 25. I set the height to 100px and the width to 200px.

The rest of the code you can ignore, I simply created some labels using spans and positioned them visually.

Just in case my code breaks here’s an image of the border-box layout. Again it has the margin on the outside in cyan, the border in black, the padding in green and the content area in white.

We need to understand the size of the box in relation to the web page. The general formula is this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

OR

Total element height= height+ top padding + bottom padding + top border + bottom border + top margin + bottom margin

Lets take the code:

margin: 25px; border: solid black 16px; padding: 25px; height: 100px; width: 200px;

width = left border + right border + left margin + right margin + right padding + left padding + width

width = 16px + 16px + 25px + 25 px + 25px + 25px + 200px

width = 332px

Because margin, when set to a single 25px value applies these to all four margins equally, we have an equal number on all sides. This means when you type in a margin with a space of 25px, you actually create 50px of space on the screen, this is accounting for the 25px you apply to the left and right of the box. The same is applied to the top and bottom, it also has a value of 50px.

We are using straight forward px values here, but we can also apply this to em, rem, % and other methods. We can mix them together at will.

Leave a comment

Your email address will not be published. Required fields are marked *

RSS
Follow by Email
Facebook
Twitter