The CSS Box Model

CSS are relatively easy to learn. Most of the times it’s as easy as “hey link, be red”. Like a magic formula. There are some more complex aspects though: using CSS positioning tecniques to build a page layout certainly qualifies as one of these.

We can choose between two CSS positioning tecniques: floating and absolute/relative positioning. These are different tecniques, but they both build upon the CSS box model: if you want to master CSS positioning, you have to master the CSS box model first.

The CSS Box Model

With CSS each element in the HTML document is included in a box. Take a look at this list:

• Box model
• Floating
• Absolute/relative positioning

Looks like there is no box, doesn’t it? Well, there actually is. Let me show you.

Let’s assign a green background color to the <ul> tag via CSS:

• Box model
• Floating
• Absolute/relative positioning

See? This is the fundamental principle of CSS box model: each element of an HTML page is included in a box.

We can do better. The <ul> element contains three <li> elements: each one of them is included in a box, too. Let’s give them a different background color, a blue one:

• Box model
• Floating
• Absolute/relative positioning

You can see all the list items’ backgrounds are now colored, but the list background is hidden. Why is that? Because we have assigned no margin or padding.

Padding

Padding is the distance between the box boundaries and its content. Let’s add a 10px padding between the list and the three list items via CSS:

ul { padding:10px; }

Here is what we get:

• Box model
• Floating
• Absolute/relative positioning

A 10px distance has been added between the <ul> box and its content.

Margin

Margin is the distance among boxes. Let’s assign a bottom margin to each list item:

li { margin:0 0 10px 0; }

And here is what we get:

• Box model
• Floating
• Absolute/relative positioning

We now have added a 10px distance between the first item box and the second item box, between the second item box and the third item box, and between the third item box and the list box.

The thing to note here is that margins don’t add distances between a box and its content (like paddings do) but between one box and another.

See how list item contents are so close to their respective box boundaries? In this case, what would you use to add some distance? That’s right, padding.

li { padding:5px; }

• Box model
• Floating
• Absolute/relative positioning

Borders

There’s a third CSS property that can alter the appearance of a containing box: the border property. Let’s assign a border to the list and each of its items:

ul { border:5px solid #333; }

li { border:1px dashed #111; }

This is what we get:

• Box model
• Floating
• Absolute/relative positioning

Touching up

As you can see, the distance between the last list item and the bottom list border is greater (double) than the distance between the first list item and the top list border. Why? Because we added a 10px bottom margin to each list item, but there isn’t a fourth item to separate from the third: the 10px bottom margin of the third list item adds up with the 10px bottom padding of the list box, which results in a 20px distance.

To correct this, we can assign a class to the last item and zero the bottom margin:

li.ultimo { margin: 0 0 0 0; }

Here is what we get:

• Box model
• Floating
• Absolute/relative positioning

Summing up

The CSS box model includes each HTML element in a box. You can use margins to alter the distance between one box and the other, or use padding to alter the distance between a box and its content.

So, what do you think?

Did you find this tutorial useful? Is something not clear enough? Share your thoughts in the comments!

Pubblicato in Tutorials.
Tags: block, box, box model, inline, tutorial