Next / Previous / Contents / TCC Help System / NM Tech homepage

15. Designing with box elements

The next important set of properties deals with the appearance of a generic “box element.” Box elements are block-level elements, so they are always preceded and followed by a line break.

An ordinary text paragraph element pp is a box element, but you can make your own box elements using the <div><div> element.

You should use div instead of p whenever your box elements are part of something other than a regular text paragraph, e.g., as part of a complex page layout. This allows style sheets to manipulate regular text paragraphs with selectors like p and p.someClass without affecting other box elements.

Here is an illustration of CSS's general box model. From inside out, you can specify:

When two such boxes are stacked vertically adjacent, their margin areas may overlap, but never their borders, padding, or content.

In this diagram, distance d is either the bottom margin of box A, or the top margin of box B, whichever is larger. (In some cases, margins may not overlap. Refer to the standard for pages of mind-numbing detail.)

For each box property, you can specify different values for top, bottom, left, and right. For example, the same box can have a thick black solid top border, a thin red dotted bottom border, an inch-thick dotted left border, and no right border at all.

Box properties fall into several groups:

15.1. Side lists

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:

Table 1. Interpretation of side lists

Side listTopRightBottomLeft
aaaaa
a babab
a b cabcb
a b c dabcd

15.2. The height and width properties

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:

  • auto: This attribute makes the box its natural size.

  • As a dimension (see Section 6.1, “Dimensions”).

  • As a number followed by a percent sign. The number is interpreted as a percentage of the containing block width, both for height and width.

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

  • min-width: Minimum box width.

  • max-width: Maximum box width.

  • min-height: Minimum box height.

  • max-height: Maximum box height.

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.

15.3. The clear property

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:

  • both: Move the box below any floating elements that precede it.

  • left: Move the box below any preceding element that is floating to its left.

  • right: Move the box below any preceding element that is floating to its right.

  • none: Allow this box to be positioned beside any preceding floating elements.

15.4. The float property

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:

  • none: Don't allow following elements to flow around or float beside the box.

  • left: Position this box to the left side of the available space and allow other elements to flow around it or be placed on its right.

  • right: Position this box to the right side and allow other elements on its left.

15.5. The padding properties

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:

  • As a dimension (see Section 6.1, “Dimensions”). For example, padding-right: 2pc would add two picas (about a third of an inch) of space between the contents of the box and its right side.

  • As a number followed by a percent sign (%). The number is interpreted as a percentage of the width of the browser window, even for padding-top and padding-bottom.

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:

  • padding-top

  • padding-left

  • padding-bottom

  • padding-right

15.6. The border 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:

  • thin for a hairline border; medium for the normal border; or thick for a slightly thicker border.

  • The line thickness as a dimension (see Section 6.1, “Dimensions”).

Here are the border properties and their values.

border-width

The simplest way to specify a border width is with the border-width property. The value of this property is a side list; see Section 15.1, “Side lists”.

For example, this rule would render paragraphs of class warning with a border 0.2 ems wide on the top and left, and 0.3 ems wide on the bottom and right:

  border-width: 0.2em 0.3em 0.2em 0.3em;

To specify the border widths independently, use these properties:

  • border-top-width

  • border-right-width

  • border-bottom-width

  • border-left-width

border-style

To set the style of all four sides of the border at once, use the border-style property. The value of this property is a side list (see Section 15.1, “Side lists”).

Available border styles include:

  • none: This is the default style—no visible border.

  • solid: The border is a single solid line.

  • double: A double solid line.

  • dashed: Displays a dashed border.

  • dotted: A border of dots.

  • inset: A 3-d border that makes the contents look like they're set more deeply into the page.

  • outset: A 3-d border that makes the contents look raised against the background.

  • groove: A 3-d effect that makes the border look inset.

  • ridge: A 3-d effect that makes the border look outset.

You can also set the styles of the four sides of the borders individually using these properties:

  • border-top-style

  • border-left-style

  • border-bottom-style

  • border-right-style

border-color

By default, borders are black. To specify a different border color, use the border-color property. The value of this property is a side list (see Section 15.1, “Side lists”. See Section 6.2, “Specifying colors”) for the various ways of specifying colors.

You can specify the color of each side of the border individually using these properties:

  • border-top-color

  • border-left-color

  • border-bottom-color

  • border-right-color

border

You can specify multiple properties for any side of the border using these property names:

  • border-top

  • border-right

  • border-bottom

  • border-left

You can set each of the above properties to a list containing a border thickness (as thin, medium, thick, or a dimension), border style (using any of the values legal for border-style), or border color (as in border-color).

You can specify all of the border properties of a box element by using the border property. Set the value of this property to a list containing any of the values allowed for border-style, border-color, or border-width.

For example, this rule

  div.orchid { border: 1px maroon dashed };

would display <div class='orchid'>…</div> elements with a one-pixel thick, maroon, dashed border.

15.7. The margin properties

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:

  • auto: Specifies the default value, no extra spacing.

  • A dimension (see Section 6.1, “Dimensions”). For example, margin-left: 10mm would add an extra 10 millimeters of margin outside the left side of the box.

  • A number followed by a percent sign (%), interpreted as a percentage of the browser window width (even for the top and bottom margin values).

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:

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

15.8. The overflow property: What if it doesn't fit?

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

visible

Display all the block's content, even if it is outside the block.

hidden

Clip (hide) any content that won't fit inside the block.

scroll

Assuming that this content is being rendered in a continuous medium (as opposed to fixed-size pages), always provide vertical and horizontal scrollbars so that the user can scroll to see the full content.

auto

If the content fits within the box, display it all without scrollbars. If the content overflows the box, then provide scrollbars.

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

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:

auto

Use the size of the box to clip overflowing content. This is the default value.

rect(top, right, bottom, left)

Use this value if you want to specify exactly where the clipping rectangle is relative to the containing box. The four dimensions specify how far the clip rectangle is inside the top, right, bottom, and left sides of the containing box, respectively. Each value is a dimension (see Section 6.1, “Dimensions”). You can use negative dimensions to allow the clipping rectangle to extend outside the containing box.

Here's an example. This declaration would clip half an inch inside the top and bottom of the box, but allow text to extent an inch outside the left and right sides:

clip: rect(0.5in, -1.0in, 0.5in, -1.0in);

15.10. The visibility property: Can we see the content?

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

visible

Display the block normally. This is the default value.

hidden

Leave space for the block, but don't display any of its content.

15.11. The position property: Positioning boxes

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

static

This is the default option: the box appears as part of the regular flow of boxes.

relative

The box's position is shifted relative to what would be its normal position. To specify how far it is shifted, see Section 15.12, “The box offset properties: top, bottom, left, and right.

absolute

The box's position is shifted relative to the box that contains it. To specify how far it is shifted, see Section 15.12, “The box offset properties: top, bottom, left, and right.

fixed

When the content is rendered in continuous media, its position is fixed relative to the viewport. On paged media, its position is fixed relative to the page box.

15.12. The box offset properties: top, bottom, left, and right

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:

  • top

  • bottom

  • left

  • right

Each property takes one of these values:

dimension

Shift the box's edge inward by the value of this dimension; see Section 6.1, “Dimensions”. A negative value shifts the box's edge outwards.

For example, these declarations would shift a box 5mm to the right:

position: relative;
right: -5mm;

int%

Shift the box's edge as a percentage of some value. For relatively positioned boxes, this is a percentage of the box to be rendered. For absolutely positioned boxes, it is a percentage of the size of the containing box. For example, these declarations move a box to the right 10% of its width:

position: relative;
left: 10%;

auto

The default value: do not shift this box edge.

15.13. The z-index property: Stacking order

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:

auto

The box has the same z-index as its containing box.

int

When you specify an integer value, the element is stacked at that given level. Also, this element becomes the base for a new local stacking context; see the explanation below.

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.