Styling Web pages with CSS-2

A number of box properties allow you to specify properties of the four sides of a box independently. A side list is a list of one, two, three or four items that describes properties of all four sides. The table below shows how the values are translated to the four sides:

You can specify the height of a box, its width, both, or neither.

Both these properties allow the same three ways of specifying the values:

Four more properties allow you to constrain the size of a box:

These four properties take the same values as the height and width properties, with one exception. You can specify a value of none for max-height or max-width, to tell the browser that there is no upper limit on those sizes.

Use this property to tell the browser whether you want to allow the box to be placed to the side of previous elements, or whether to move it down below any previous elements. Values are:

You can specify a float value for a box to tell the browser that it can allow following elements to flow around it or be positioned to its sides. Values are:

Padding is extra space added around the content of a box. The default padding is none at all.

The amount of padding can be specified in two ways:

The usual way of specifying padding is to specify the amount of padding on all four sides in one rule like this:

padding: side-list;

where the side-list is as described in Section 15.1, “Side lists”.

For example, to specify an extra 1.5 picas of padding:

padding: 1.5pc;

To specify one em at the top and bottom, and two ems of padding on the sides:

padding: 1em 2em;

You can also specify the padding for only one side with these properties:

The default box rendering is not to have a border at all. To make a border appear around a box, you must specify at least a border width and a border style.

Each side of the border can be any of these values:

Here are the border properties and their values.

Use the margin property of a box to add extra space outside the box (and outside the border, if there is one).

Values can be any of:

Most commonly, all four margins are set at once with the margin property. The value of this property is a side list (see Section 15.1, “Side lists”).

For example, this rule specifies a one-em margin around all div elements:

div { margin: 1em; }

To specify the margin on a specific side of the box, use one of:

This property allows you to specify what happens when content won't fit inside a given block. These values are allowed:

See the related property, Section 15.9, “The clip property: Specify a clipping rectangle”.

Use this property if you want to specify how far content can extend outside the box before it is clipped. A separate property controls whether or not clipping occurs: see Section 15.8, “The overflow property: What if it doesn't fit?”.

The clip property takes either of these values:

This property allows you to reserve space in the layout for some element, but without rendering it. Values may be either of:

You can control where a box appears by setting its position property. Values include:

When a box's position property is not static (see Section 15.11, “The position property: Positioning boxes”), these four properties specify where the box's edges are relative to some other box:

Each property takes one of these values:

When elements overlap each other, you can use the z-index property to specify which elements are in front and which are in back.

The z-index property is a number that specifies the stacking order of a box. Higher numbers are “in front” and may obscure other elements with lower z-index values. The base value is zero, and values may be negative.

The z-index property may take any of these values:

Boxes are stacked according to their z-index value, with higher numbers in front of lower numbers.

However, each box that uses a specific z-index value establishes a local stacking context for boxes that are inside of it. This means that any internal boxes are stacked relative to each other according to their z-index values, but they are all stacked in the same group as the parent box, regardless of how their z-index values compare with boxes other than the parent box.

Here's an example. First, a fragment of HTML:

    <div id="d1">
      <img src="i1.jpg">
    </div>
    <div id="d2">
      <img src="i2.jpg">
      <div id="d3">
        <img src="i3.jpg">
      </div>
    </div>

And here's a stylesheet for that:

div
{ position: absolute;
  top: 0in;
  left: 0in;
}
div#d1 { z-index: 5; }
div#d2 { z-index: 3; }
div#d3 { z-index: 15; }

The first rule says that all div elements are absolutely positioned at the top left corner of the page. The next three rules assign z-index values to the div elements in the HTML.

There are two different stacking contexts here. Block d1 and block d2 are in the outermost (global) stacking contexts, so block d1, with a z-index value of 5, is in front of d2 with a z-index of 3.

Block d3, however, is inside block d2's local stacking context, so block d2 and everything inside it are stacked together. Block d3's z-index value of 15 only influences how it stacks relative to any other elements inside of block d2.

Therefore, image i3.jpg, with a z-index of 15 inside that local stacking context, stacks in front of image i2.jpg, which has the base z-index of 0 inside that local context.

However, on the final page, image i1.jpg still appears in front of i3.jpg, because it has a higher z-index in the global stacking context.