Understanding the CSS Box Model

In CSS, the box model is where we start to have fun. It’s the basis of page layout, so it sort of constitutes the building blocks of what our pages will look like. The box model isn’t difficult to understand either, once we grasp a few key concepts.

In the most basic sense, the box model applies to each and every element on an HTML web page. Included in the box model are both inline and block-level elements. An inline element occupies only the space bounded by the tags that define the inline element, while a block-level element occupies the entire space of its parent element (container), thereby creating a “block.”

Here are some great examples of inline and block-level HTML elements:

Inline

<span></span>
<b></b>
<td></td>
<a></a>
<img>

Block

<div></div>
<h1></h1> //ALL HEADING TAGS
<p></p>
<ul></ul>
<table></table>

To explain this a bit better, inline elements can reside inside an HTML document similar to how a word resides inside a paragraph. It only takes up the space of the element (or word) itself. “The boy has red hair.” Think of the word, “boy” as an inline element. It goes with the flow of what’s around it.

A block-level element takes up the entire line, or space, from side to side, within its parent container. Take a look at the paragraph before this one. Now take a look at this paragraph. Notice how they both consume the entire row, from side to side. Block-level elements stack upon one another. It’s as if there is a line break in between each of them.

All in all, each element on a page is considered a box. To start with, if a box is empty on a page, it’s invisible to the eye, meaning a user won’t be able to see it. The empty box would be considered the content area. If we put something inside the content area, such as a sentence or an image, we’d have a visible box. No spacing or formatting would be applied to it.

Before reading the sections below, I suggest you take a quick look at this MDN page because it displays a nice example of what a block looks like and it separates out each level of the formatting I’m going to discuss next.

Padding

If we wanted to adjust the spacing of our box, we can apply a bit of formatting to it by way of padding. What’s padding? Well, padding inside a box is the space that’s between the content area and the edge of the box itself. It’s a buffer area, that allows the content of a box to distance itself from what’s outside the box.

I’ll give an example of some code below. This is the basic syntax for padding and it will be applied to a div element.

div {
    padding: 10px;
}

In the example above, the content inside the div element would be padded by ten pixels on every side. Next up, I’ll show you how to pad something side by side.

div {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

The code above would pad the content of the box exactly the same way as the first example. You can see though, if you wanted to adjust the distance of each side, you could easily do that by giving different values for each property. If you have identical values for the top and bottom of the box and two different identical values for the left and right sides of the box, you could write some shorthand code like this:

div {
    padding: 10px 15px;
}

The first value would pad the top and bottom and the second value would pad the left and right.

div {
    padding: 10px 15px 20px;
}

In the example above, the first value would pad the top of the box, the second value would pad the left and right sides of the box and the third value would pad the bottom of the box. If we wanted to continue our shorthand method of padding with unique values for each side, we could do it like this (a shorthand way to accomplish what the second example did):

div {
    padding: 10px 15px 20px 25px;
}

The way this works is like this: each value in the rule above rotates around the block in a clockwise fashion. So, 10px would be the top, 15px would be on the right, 20px would be at the bottom and 25px would be on the left.

Borders

When it comes to adding borders to our boxes, much of what I covered above applies. The majority of what changes has to do with the additional rules we are about to take advantage of. Let me show you some code below:

div {
    border-width: 5px;
    border-style: solid;
    border-color: #cccccc;
}

As you can see, instead of simply adding a border width, which would be comparable to the rule for padding, we’re able to designate a style as well as color. For lots of great details on these properties and values, please take a look at this page.

What I’d like to show here is not so much about the micro details of all the possible values we’re able to give our properties, but more about how to go about writing the rules themselves. For instance, let’s say we’d like to vary what’s displayed, regarding borders, for each side of our box.

div {
    border-width: 5px 10px 15px 20px;
    border-style: solid dotted dashed double;
    border-color: #cccccc #dddddd #eeeeee #ffffff;
}

Now, as you can see from the code above, we can give each side of our box a unique border property. And just like the padding examples above, the application of these properties flows around the box in a clockwise fashion.

If we were interested in sticking with the same border values all the way around our box, we could skip writing out three rules and simply write one rule in shorthand. It would look something like this:

div {
    border: 5px solid #cccccc;
}

In the above example, I created a border with a width of 5px, a style of solid and a color of grey.

Now, let’s pretend that we only wanted to have a top border. We can accomplish this by using the same shorthand as I just showed, but by adding a few keywords in the property:

div {
    border-top-style: 5px solid #cccccc;
}

Now the box would only have a top border with the values I discussed previously.

Margins

The wonderful thing about margins is that they are strikingly similar to padding. But instead of padding the content inside our box (squeezing our content area), we’re buffering space outside our box, pushing it away, (or drawing it closer with negative values) from other elements on the page. So, to recap: padding inserts spacing inside the box edges and margin adds spacing outside the box edges.

Let me give you some code examples so you know how to write margin properties:

div {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

I think you see where I’m going with this. If you re-read the padding section above and replace all instances of “padding” with “margin,” you’d be all set. There is one thing I’d like to fill you in on though. With margins, if you wanted to center a block-level element on the page, you could do it with a value of “auto.” So take a look at this:

div {
    width: 50%;
    margin auto;
}

In the above example, we have a div element that only takes up half the width of the page. To center it, or give the same margin value on all sides, we use the “auto” value.

Display

For the final section of this post, I’d like to discuss display values. While I won’t go into minute details here, I will cover a few of the more popular values you may find or might want to use in your own designs. For a full immersion into the CSS display property, please take a look at these resources:

MDN Display

W3Schools Display Property

CSS Tricks Display

Learn CSS Layout: The Display Property

The four values I’d like to go over are “none,” “inline,” “block” and “inline-block.” These are the most prevalent on the web as well as the most useful. In order to keep things simple, I think I’m merely going to give a definition of each value below.

None – When using the none value with the display property for an element, that element will become invisible. All descendant elements will become invisible as well.

Inline – If you apply an inline value to an element that comes with a block-level value by default, you essentially switch the block-level attribute to inline. So, if you were to use an inline value for an H1 element, that heading would fall into the flow of the document, as opposed to following the standards for block-level elements.

Block – The display block value is the opposite of the inline value. This value switches an inline element to a block-level element, giving it the properties of that.

Inline-block – This value changes an element’s default value to an inline-block value. In essence, this value displays an element as an inline-level block container. It maintains the characteristics of a block-level element, but flows with the document like an inline element does.

——

If you have any questions or comments regarding this post, please leave them below. If you would like to read more about CSS, be sure to check out my CSS category. I write almost every day and it’s growing by leaps and bounds.