Learning CSS 101: The Box Model

February 17, 2010

By Chris Jean

If you want to design awesome web sites or just make little tweaks to your site’s CSS, you should first learn some fundamentals. One of the most important things to learn know about CSS is how the box model works.

Everything on a webpage is a box. The site you are looking at right now is composed of hundreds of boxes. These boxes come from tags. Each time a tag is used, another box is added to the layout.

Using CSS, we can style these boxes to look the way we want them to. We can add margins, padding, borders, and backgrounds to these boxes to make them more interesting and to make them interact with the surrounding content better. How all these rules are applied to boxes and how surrounding boxes interact with each other is the box model.

There are a number of really great resources with detailed descriptions of the box model concept. Rather than recreating the wheel, I’ll simply link you to those guides.

BrainJar.com: CSS Positioning

I highly recommend this article to both beginning and advanced developers. If you haven’t read it, you need to. In five pages, this article explains the basic concept of the box model, the difference between inline and block elements, how positioning works, how to use floats, and explains the stacking order (z-index).

The CSS Box Model | CSS-Tricks

This article is also a must-read. It details how width and height calculations work (something that BrainJar doesn’t discuss), describes some hidden gotchas about box interaction, and gives a tip on visualizing all boxes on your site.

Interactive CSS Box Model Demo

Still having trouble visualizing how the margin, border, padding, background, and content go together? This interactive model very nicely shows the relationship of these box attributes.

Box Model – Technical definition

The box model used by all major browsers today was described in this W3C technical document. If you want to know everything about how boxes are supposed to work, including margin collapsing, I recommend reading this document. It is highly technical, so you might want to take it in a few pieces at a time.

Happy reading.