Archive from Nov 2007
Understanding the CSS Box Model
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’t pack a box in real life due to some traumatic physical injury, you shouldn’t have much of a problem, either. Also, I’m sorry about bringing up the whole box thing.
“Every single element on a web page, no matter how big or small, is a box.”
The basic premise behind the box model is this: 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’re really doing is manipulating the size, shape, color, decoration and so forth of that box and its contents.
So what’s the box model? The box model is an agreed-upon (mostly… I’ll 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’s a good idea to know how the rules you write will be displayed.
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’ll go through these properties one by one below. And to help it make sense, we’ll relate it to how you’d pack a box in real life.
- Border: This is the box. When you’re starting out, it helps to think of the border as the outline of a real box. It can have different thicknesses (widths) and colors, but its basically just a rigid structure you put things into. Of course, you can also have a border of zero, but it still helps to think of the border as the outermost part of your box, even if it isn’t there.
- Background: If you apply a background to something, it stretches from one side of the border to the other, covering the entire inside of your box. Also, if you apply both a background color and a background image, the image will sit on top of the color.
- Padding: Think of padding as the bubble wrap or packing peanuts you’d add to a box before shipping it somewhere. Padding lies between your border and your content. This is the sanest property of the lot.
- Width: This is the width of your content inside your box. This can be somewhat counter-intuitive at first, because it is not the width of your border. It’s the width of the stuff inside your border, and inside your padding. So if you set a width of 400 pixels, with 20 pixels of padding on both sides, and a 5-pixel border, your actual “box” would be 400+20+20+5+ 5 (otherwise known as 450) pixels wide.
- Margin: Margins exist outside of our hypothetical box, around your border. Think of it as space outside your box that you’re deliberately leaving empty, as if the stuff inside the box were volatile, dangerous, stinky, or otherwise something you’d want to give a wide berth. So if you took our box from the width example and gave it a 10 pixel margin on every side, we’d now have a 450 pixel wide “box” taking up 470 pixels of space.
And that’s 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’s called Internet Explorer. Perhaps you’ve heard of it.
Here’s 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’ll explain. Let’s say you set the following rules in your style sheet:
box {
width: 400px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Look familiar? That’s 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. 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.
What’s 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’re using good DOCTYPEs. For more in-depth detail on IE and the Box Model, I’d suggest reading this fantastic article on 456 Berea Street.
What is this CSS thing, anyway?
So you’ve been hanging around the web gurus long enough to know that “CSS” is something big and important in the web design world. You might even know that it has something to do with making pages pretty, or more Web 2.0, or something like that. And that’s true (to an extent). But what does CSS really mean?
CSS is an acronym that stands for Cascading Style Sheet. Not as illuminating as you hoped? Well, let’s break that definition down into its important parts:
“Style sheets have been around for longer than the web.”
CSS is a Style Sheet. This is a useful starting point, because style sheets have been around for longer than the web. Back in the golden days of the business world, a style sheet was quite literally a sheet (or more often a document) which described, in excruciating detail, how documents created by a particular company should look. Style sheets dictated the typefaces used in press releases, the specific colors used in the masthead, the placement of the logo, and every other element you could imagine (and many you can’t imagine). It was a way of maintaining consistency across a wide range of documents created by any number of writers. Though the production of the individual documents was disparate, they created a consistent, cohesive whole.
Style Sheets in the web sense of the word serve the same purpose. CSS exists in a document (or series of documents) for the purpose of creating consistency across any number of web pages. Using CSS, you can say something like, “I want all of my paragraphs to be indented half an inch. And be set in 14 point double-spaced Comic Sans. With a lime-green background.” I’d rather you didn’t do those things, but the point is that the potential is there. You set up those rules in your CSS, and viola! All of your paragraphs can instantly look the same across your entire web site, no matter how many pages might exist. This is a powerful tool.
CSS Cascades. This is a trickier concept to master, because there isn’t an equivalent from the days of Business Yore. Not that any self-respecting CEO wouldn’t have given his mother’s right arm for such a feature… but sadly, it’s something that computers are naturally very good at and humans… well, not so much.
So what does cascading mean, exactly? Let’s say you’ve set a very simple rule that says all paragraphs should be double-spaced. Simple enough. But now you take that paragraph, and you put it inside of a table cell, which is inside of a table, which is on a completely different page. Guess you have to write a new rule, huh? Nope! The Cascade part of CSS means that your general rules (paragraphs should do such-and-such) cascade through every document you’ve linked to the style sheet, changing every possible tag it can.
But what happens if you didn’t want your paragraphs inside of tables to look the same as all the other paragraphs? No problem. Just make a slightly more specific rule regarding that particular usage and suddenly all paragraphs within all tables are behaving differently. That is powerful functionality.
So to summarize, CSS is a powerful tool with some powerful functionality. It allows you to create a single style sheet, and from that document implement seamless brand consistency across any number of documents. And that functionality has hidden benefits, too. Let’s say you’ve got a web site running CSS, and suddenly it hits you: Comic Sans was not the best typeface choice for your legal documents. All you have to do is make one change in one document, and that potentially devastating problem just evaporates.
Which brings us to our third important component: CSS is something that helps you sleep better at night.
![[your ad here] Become a Sponsor! Click here to learn more.](/img/your-ad-here.gif "Click here for more information.")