The Box Model

Now that we've covered the basics of font, let's move on to margins, borders and padding.

CSS uses a box model:

         _______________________________________
        |                                       |
        |           margin (transparent)        |
        |   _________________________________   |
        |  |                                 |  |
        |  |        border                   |  |
        |  |   ___________________________   |  |
        |  |  |                           |  |  |
        |  |  |     padding               |  |  |
        |  |  |   _____________________   |  |  |
        |  |  |  |                     |  |  |  |
        |  |  |  |  content            |  |  |  |
        |  |  |  |_____________________|  |  |  |
        |  |  |___________________________|  |  |
        |  |_________________________________|  |
        |_______________________________________|

                 |    element width    |
        |               box width               |

Every element has its content at the center of the box. Around the content are the additional optional padding, border and margin areas. The optional border draws a border around the element. Spacing can be added both inside and outside the border. Spacing inside the border is called padding, while spacing outside the border is called margin.

Example

In this example, we'll place a margin, a border and padding around the body content. We'll also place these elements around the <h1> heading. We won't place these around the <p>.

None of the browsers I've tested with really handle this very well. Surprisingly, Netscape 4 was the best of breed — at least in some ways.

Let's first look at Netscape 6.0:

This is just about perfect. There is the correct margin, border and padding around the entire body content. The headline also has the correct margin, border and padding, so that it's indented a bit compared to the paragraph text. But Netscape 6.0 really falls down if the content is too tall to display in the window: there's no scroll bar! Here's what happens when we resize the window:

Now let's take a look at Netscape 4:

Far from perfect! There's too much margin at the top of the page. At first glance, it seems like there's all too much on the right, but that's because space has been reserved for a scroll bar. The border around the heading includes a blank line. But Netscape 4 edges out Netscape 6 for functionality because it will add a scroll bar if you resize the window:

Now let's take a look at IE 5:

IE 5 handles a border around the body content much differently, and seemingly violates the box model. When a border is included, it always is placed around the very outside of the window. Both the margin and the padding are placed inside the border. Notice the the scroll bar appears inside the border! (Unlike in Netscape 4, scroll bar is there whether it is needed or not.) The margin, border and padding all work properly around elements other than body.