The CSS Box Model and You

Friday, December 12, 2003 at 8:10 pm | Comments off

Most of this entry will be old news to a lot of you, but I've had a fair number of people ask me about the box model, with a misunderstanding of how it works. I'm going to attempt to simplify the concept, and explain it as well as I can.

The basis of most of the confusion comes from misunderstanding of how widths are calculated. When unframiliar with the box model, one would tend to assume that when a width is specified, border and padding would be included in the width. It is not so...

Let's take a look at a simple diagram (color coded and marked for your viewing pleasure), and the code that goes along with it.

box model diagram

Comments

Toby Steward
December 16th, 2003
9:18 AM | #

this is great thanks pyro/ryan brill!

Comments are automatically closed after 45 days