Styling Inside the Box

CSS box properties -- once they're fully supported by the major browsers -- will enable Web developers to position text and images without the use of tables. This month, we'll take a look at some of the CSS box properties to show their potential advantages. We'll start out with an explanation of the difference between margins and padding, and toward the end of the article, we'll explain how to float elements to create some interesting effects.

Note: In order to view the examples in this article, you will need either Netscape Navigator 4.04, or Microsoft Internet Explorer 4.0 with style sheets enabled (see the sidebar, Enabling Style Sheets) in your browser's Preferences.

CSS1 Box Properties margin-top margin-right margin-bottom margin-left margin padding-top padding-right padding-bottom padding-left padding border-top-width border-left-width border-bottom-width border-left-width border-width border-color border-style border-top border-right border-bottom border-left border width height float clear

Box properties are used to control the appearance of an element's "box" -- thus the name. A "box" is the area of space an element occupies when displayed by the browser. For example, if you were to draw four lines to form a square around this paragraph, that would be the box for this paragraph.

Because there are a lot of box properties, we won't get to all of them in this article. Instead, we'll hit two major groups of properties. (The table at right lists all of the box properties defined in the CSS1 specification.) It's important to remember that box properties are one of the areas of the CSS specification that aren't fully supported by the major browsers. To see which properties are supported, I'd recommend you peruse the CSS Compatibility Charts.

A basic example (Figure 1) shows a diagram of the various components of an element's box. The olive-colored area is the Content Box, so named because it's the box containing the text. Beyond this box is Padding, then the Border, and finally the Margin of the box. Added together, these areas make up the element's box, and there are properties that can address just about every part of the box. Note that the line around the outer edge of the margins is included here for illustrative purposes; there are no properties for setting visible lines at that point. Also, as we'll see in a moment, the padding should really be a different color, but I left it gray for clarity's sake.

Figure 1: Learning the placement of margins, padding and borders can help to understand CSS1 box properties.

Padding and Margins

At the outer edge of the element box, outside of the borders, are the margins. These are areas of blank space found around the box through which the background is visible. For example, if you have a paragraph with a white background, and your page's background is blue, the margins will be blue.

Inside the margins, between the borders and the element's content, is the padding. The difference between padding and margins (besides where they sit in relation to the borders) is while margins do not take on the element's background, the padding does. Thus, if you have a paragraph with a white background, and your page's background is blue, the padding will be white. The difference can be seen in Figure 2.

Figure 2: This image reflects the difference between the margin-left and padding-left box properties (see the code below).

<P style="padding-left: 20px;">
This is a paragraph with a
<CODE>padding-left</CODE> of 20 pixels.
</P>

The padding and margins can be defined using the properties padding and margin, as well as the side-specific properties listed in the CSS1 Box Properties list above. With the shorthand properties, however, you can set all four sides at once, which is a real timesaver.

Figure 3: This paragraph has the padding set to 10 pixels (see the code below).

<P style="padding: 10px;">
Here's ten pixels of padding.</P>

Making Padding Behave

Although you can get the padding effects shown in this article using either Navigator 4 or Explorer 4, you'll need to employ a workaround in order to make sure that Navigator gets things right when using a background color. Anywhere padding is used with a background color, add the following declaration: border: 1px solid none;. This will have no visual effect, but in the course of telling Navigator to draw a one-pixel solid transparent border, padding will suddenly start to inherit the background color. If you leave out this statement, many versions of Navigator will not extend the background color into the padding. (Again, this is just a workaround to compensate for bugs in Navigator -- this is not how CSS1 is defined to behave.)

The easiest case is assuming that you want the same value all the way around. For example, let's say you want a paragraph with a white background and 10 pixels of padding on all sides. This would require the declarations background: white; padding: 10px;, and get you the result in Figure 3 (Netscape users, see the sidebar Making Padding Behave).

However, suppose we want different amounts of padding on each side: 10 pixels on top, but only 3 on the bottom, 20 on the left, and none on the right. In that case, you can string the values together, but you must do so in a specific "clockwise" order: top, right, bottom, left. Thus, the above values would be declared as padding: 10px 0px 3px 20px;. You must write the values in this order, or else you'll have values assigned to sides you don't want.

There are a few shortcuts in this approach, thankfully enough. Let's say we want 10 pixels of padding on the sides, but 30 pixels of padding on the top and bottom. In that case, you might think you'd have to write padding: 30px 10px 30px 10px;. You can do things that way, but if you want to keep things simple, then the padding declaration can be changed to padding: 30px 10px;, which gives you the results seen in Figure 4.

Figure 4: By alternating the padding width, you can create different sized borders around text and objects.

<P style="padding: 30px 10px;">
Here's some uneven but symmetrical padding.
</P>

How does this work? The declaration padding: 30px 10px; means, literally, top=30px and right=30px. The browser then looks for the bottom padding value, which should be next in the string. However, when it doesn't find a value for the bottom padding, the browser uses the value for the top padding. The same goes for the left padding. When the browser doesn't find a left padding value, it uses the right padding value. Similarly, if you use three values, then the first and third are used to set the top and bottom padding, respectively, and the second is used to set both right and left padding, like this: padding: 10px 20px 5px;.

The same rules apply when using the margin property. The only difference, as we discussed earlier, is that margins don't inherit the element's background; they merely add empty space around the element. Also, if you only want to set the padding or margin for a single side, leaving the others to their defaults, then you can use one of the properties designed for this purpose, such as padding-top or margin-left.

Making float Behave

Here we go again...this time, though, IE 4 is the one we have to coddle. In order to get float to work with text elements, you need to explicitly declare a width, like so: width: 10em;. I don't know why this is necessary, only that it is. It doesn't even work all that often, or very well, although it sometimes works with the <SPAN> drop-cap trick. Also, you must have the final version of IE 4, so if you're using a preview release, you're out of luck. In general, stay away from floating text in IE 4. (Thanks to Howard Marvel for discovering this trick.)

Floating Along

Floating is pretty simple to grasp, assuming you're familiar with HTML v3.2 or later. As you're no doubt aware, it's possible to make images stick to either the left or right side of a page, with text (and other elements) flowing past it. This is how you would code the HTML to float an image to the left:

<IMG SRC="one.gif" ALIGN="left" VSPACE="8" HSPACE="5">

When you do this to an image, you're floating it, and adding padding around the image using the VSPACE and HSPACE attributes.

Well, thanks to CSS1, you can float anything using, of course, the float property. In order to float an image to the left, you could write the following image tag:

<IMG SRC="one.gif" STYLE="float: left;">

Or simply declare at the top of the document that all images (perhaps those of a given class) are floated.

As I said, however, we can (in theory) float anything: headings, tables, even whole paragraphs. Think of it -- actual sidebars which aren't dependent on tables, but are instead paragraphs which have been floated to the side and given a different color! It would be a wonderful thing.

And again, I say "would be" because browsers aren't very good about handling floated text just yet. Navigator does the best job, though it is a tad buggy, and Explorer can be coaxed into floating some text (see the sidebar Making float Behave). Figure 5 shows a good example of floating a paragraph.

Figure 5: Here we've used the CSS class .fig5 to float the paragraph with the olive background color.

This is the code used to get the above effect:

<STYLE type="text/css">
.fig5 {color: black;
       background: olive;
       float: right;
       width: 8em;
       padding: 5px;}
</STYLE>

<P class="fig5">
This is a sidebar past which...</P>

<P>This is the main text of the page...</P>

Another way to use float and the other box properties in interesting ways is with drop-caps. In order to get a drop-cap effect, the use of float is pretty much mandatory. Here's an example, using the <SPAN> workaround we discussed last month:

<STYLE type="text/css">
.dropcap {float: left;
          font-size: 24pt;
          background: black;
          color: silver;
          padding: 5px 1px;}
</STYLE>

<P>
<SPAN class="dropcap">T</SPAN>his paragraph
starts ...</P>

Assuming that the page's background is also silver, then the drop-cap should look like a black box with the shape of an uppercase "T" punched out of it.

Closing the Box

I realize there is a lot more to be covered, but I'm running out of space, and besides, properly explaining box properties could be one or two whole chapters of a book. Hopefully, this month's installment has piqued your interest in box properties enough to want to experiment with them a bit.

Next month, be here for a special issue on CSS2, including some in-depth examinations of what's new and what's changed compared to CSS1, a how-to on CSS positioning and how it may someday make your life a lot easier, and a look at the efforts of some experts to make authoring style sheets a heck of a lot easier for us.