Scarf*oo

Welcome to the second part of the Back to The Basics series of articles here on Scarf*oo. Back to The Basics focuses – in simple terms – on the basic stuff every web developer should be familiar with. In the first Back to The Basics article we covered the shorthand CSS notation. Today, we’ll be looking at the obscure box model and what does it mean to us and how can we manipulate it.

The Box Model

The box model is a term used when referring to the rectangular boxes placed around every element in the page source (source document). It is one of the most basic concepts every web designer should know by heart.

The box model is constructed with the following boxes or layers:

1. Content
The innermost part of the box is the html element itself or content, such as “<div>”, “<p>”, “<h1>”, “<ul>” … etc. The CSS width property defines the width of this element, similar goes for the height.

div {
    position: absolute;
    width: 150px; /* set the div element to be 150 pixels wide... */
    height: 40px; /* ... and 40 pixels tall */
}

2. Padding
Next we have the padding property, which is the first layer you’d encounter going outwards from the actual element covered in the previous point.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px; /* add 30 pixels to the top and bottom, and 20 pixels to the left and right padding */
}

3. Border
The middle layer in the box model is the element’s border. The space used by the border in the box model is the thickness of the border.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #EFD5B4; /* add a solid 1 pixel thick border with the #EFD5B4 color */
}

Above I’ve used a shorthand notation to define the border’s thickness, style and color. If you wanted, you could break down each of these three properties into their top, right, bottom and left components, but I’m not going into that in this tutorial. You can read more on shorthand notations in the first Back to The Basics article, The Shorthand CSS Notation Explained.

4. Margin
Then we have the margin, which is the space just outside the border.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #EFD5B4;
    margin: 30px; /* add a 30 pixels margin around the element */
}

Perhaps it is in order to mention that there are some bugs associated with proper margin handling in certain browsers, particularly IE 5 and 6. One of the nastiest bugs is the doubled margin bug, which basically doubles the left and/or right margin if the element is floated. Thankfully this bug has been squashed in IE 7. For a quick fix to this bug, take a look at the last tip in the article 5 CSS Tips to Make IE (You) Happy

The sum of the layers above – left and right margins, border, padding, and the content width – defines the total box width. Similarly, the sum of the top and bottom margins, border, padding, and the content height defines the total box height. Take in consideration this model when specifying margins, borders and paddings to elements – basically, everything adds to the width/height of the element.

5. Position
Lastly we have the position of the element, which is measured from around the bounds of the margin of the element. The position is set with the top, right, bottom and left CSS properties.

div {
    position: absolute;
    width: 150px;
    height: 40px;
    padding: 30px 20px 30px 20px;
    border: 1px solid #EFD5B4;
    margin: 30px;
    top: 10px; /* move the element 10 pixels down from the parent element box */
    left: 10px; /* move the element 10 pixels right from the parent element box */
}

Conclusion

I recommend you to install Firebug, a great web development plugin for Firefox. Firebug has a useful box model view represented in the image above.

There are tons of details if you want to dig deeper into the box model. If you want to know more, visit The Box Model document and the Visual formatting model details document, both located over at W3.org.

Thanks for reading!

This entry was posted on Monday, April 20th, 2009 at 10:55 pm. You can follow any comments through the RSS feed. Both comments and pings are currently closed.