![](\"http:\/\/farm1.static.flickr.com\/33\/52872780_e1dc7aad1b_m.jpg\")
<\/p>\n<\/p>\n
A fundamental understanding of the CSS box model is essential to gaining a basic understanding of CSS in general. The good news is, if you can pack a box in real life, you can understand the CSS box model. And if you can\u2019t pack a box in real life due to some traumatic physical injury, you shouldn\u2019t have much of a problem, either. Also, I\u2019m sorry about bringing up the whole box thing.<\/p>\n
The basic premise behind the box model is this:<\/strong> Every single element on a web page, no matter how big or small, is a box. Got that? Anything that starts with a <tag> and ends with a <\/tag> is a box (container, whatever). So a <p> tag is a box, which is maybe inside of a <div> box, inside of a <body> box, inside of a <html> box. And with CSS, what you\u2019re really doing is manipulating the size, shape, color, decoration and so forth of that box and its contents.<\/p>\n So what\u2019s the box model? The box model is an agreed-upon (mostly… I\u2019ll get to that in a bit) set of standards for how web browsers will display (model) the content (boxes) on a page. And what does that have to do with you? Well, if you want to style the content on your site, it\u2019s a good idea to know how the rules you write will be displayed.<\/p>\n So here are the most basic properties you have to worry about when dealing with the box model: border, background, padding, width and margin. We\u2019ll go through these properties one by one below. And to help it make sense, we\u2019ll relate it to how you\u2019d pack a box in real life.<\/p>\n And that\u2019s really all there is to the box model! Well, at least it would be, except for one teensy-weensy little browser that does things a little bit differently. It\u2019s called Internet Explorer. Perhaps you\u2019ve heard of it.<\/p>\n Here\u2019s how it differs: Instead of counting the width as the width of your content, Internet Explorer counts it as the width of everything related to your box. I\u2019ll explain. Let\u2019s say you set the following rules in your style sheet:<\/p>\n Look familiar? That\u2019s our box from the example above. And as explained, browsers following the box model will give your content 400 pixels of wiggle room, surrounded by a total of 70 pixels of other stuff around it. But Internet Explorer behaves differently. Basically, instead of adding like we did, IE will subtract<\/em>. So instead of ending up with a 400+40+10+20=470 pixel wide space, IE gives you a 400 pixel wide space with 400-40-10=350 pixels of space inside for your content, with 20 pixels of margin around it.<\/p>\n What\u2019s the good news? Well, if you write your XHTML properly and include an appropriate DOCTYPE at the beginning of your page, everything from IE 6 and newer actually behaves like they should. So really, this is only a problem for IE 5.5 and below, assuming you\u2019re using good DOCTYPEs. For more in-depth detail on IE and the Box Model, I\u2019d suggest reading this fantastic article on 456 Berea Street<\/a>.<\/p>\n\n
box {\nwidth: 400px;\npadding: 20px;\nborder: 5px solid black;\nmargin: 10px;\n}<\/pre>\n