CSS 2.0 Properties - Boxes

CSS2 Properties - Boxes

Boxes

Display

This specifies the type of box that an element will produce. Possible values are block (e.g., P), inline (e.g., B), list-item (block element with list item marker box; e.g., LI), run-in (see below), compact (see below) and none (ignore element entirely and all of its descendants).

Display applies to all elements, has an initial value of inline and is not inherited.

IE 3 does not support display. IE 4 on the PC does not support display except for none. IE 5 supports block, inline and none. Opera supports block, none and inline. IE 4 on the Mac supports none. Netscape only supports none usably.

Compact boxes

If a compact box is followed by a non-floating block element, then it will go in the block element's left margin if there is room, but otherwise it will behave like a block element:

<P style="display: compact">
Compact box here
</P>
<P style="margin-left: 40%">
Block element with big left margin
</P>

Compact box here   Block element with big left margin

<P style="display: compact">
Compact box here
</P>
<P style="margin-left: 4%">
Block element with big left margin
</P>

Compact box here
  Block element with smaller left margin - so goes on next line

The width of compact elements is entirely determined by the width of their content (i.e., the width property has no effect unless they act as block elements). As a result, if they are wider than one line, they will be forced to act as block elements.

Note that where a compact box and block element are on the same line, for the purposes of calculating the height of the line box (see line-height), the compact box is taken into account. Note also that text-align: right would be applied to a compact element within the block element's margin. Text-align: justify would not be applied.

Run-in boxes

If a run-in box is followed by a non-floated block-level element, it is formatted as an inline element within that box. Otherwise it is treated as a block element.

E.g.:

<H1 style="display: run-in">
A run-in heading
</H1>
<P>
A P element

A run-in heading A P element

Height

Height is principally used to specify the height of block and replaced elements.

Heights can be specified as a length, % (of parent's height, but treated as auto if the parent did not have an explicitly set height), or as auto (which is the initial value).

P {height: 100px}

Height applies to all elements except non-replaced inline, table columns and column groups. Height is not inherited and can't be negative.

Note that 'height' does not specify the total height of the element, but only the height of its content, so that margins and borders are additional to 'height'.

Width

Widths can be specified as a length, % (relative to the width of the containing block), or as auto (which is the initial value). It does not apply to non-replaced inline elements (whose width is the width of their content, subject to the fact that they might occupy several lines of a containing block), to table rows or row groups. Width cannot be negative.

Width specifies the content width of an element. Therefore an element with a width of 100 pixels, a left margin of 100 pixels and a right margin of 100 pixels will occupy 300 pixels of space.

Width is not inherited.

Calculating the width and height of elements

Although width, margins and height will normally behave in an intuitive manner, it is useful to know how they work, especially since they do not always do what you expect.

To find the width and height of elements, precise rules are used. These are described below.

Width of elements

Static and relatively positioned inline-level non-replaced elements

Width is inapplicable (it is that of the content), and all auto values are replaced with 0.

For example: <SPAN>some text</SPAN>. In this example, the initial values for margin-left and margin-right are auto. As stated, this will be treated as 0. The initial value for width is also auto; this will be treated as the width of the element's content.

Static and relatively positioned inline-level replaced elements

If an element is replaced (such as IMG), width: is replaced by the intrinsic values for the elements, and other auto values are treated as 0.

Floating non-replaced elements

All auto values become 0, meaning that floating non-replaced elements must have an explicit width.

Floating replaced elements

Width: auto is replaced by the element's intrinsic width, and all other auto values by 0.

Block-level static and relatively positioned elements

Generally, width + padding-left + padding-right + margin-left + margin-right + border-left-width + border-right-width = width of the containing block.

It should be noted that border widths are only of relevance if a border style has been set.

This equality is solved by the browser.

On the root element (i.e., BODY or HTML) the width of the parent element is that of the viewport (or window).

1. If all the values are set to a value other than auto, then margin-right is adjusted to satisfy the equation.

Block-level non-replaced elements

If the equality cannot yet be solved, the rules below are used.

2. If exactly one of the values is set to auto, the value is put in for it to satisfy the equation.

3. If width: auto, then any other remaining auto values are replaced with 0, and a value is put in for width to satisfy the equality.

4. If margin-left and margin-right are both still auto, they will be set to equal values.

Block-level replaced elements

If the equality cannot yet be solved, the rules below are used.

2. If an element is replaced (such as IMG), width: auto is replaced by the intrinsic value for the element.

3. If margin-left and margin-right are both still auto, they will be set to equal values.

Absolutely positioned (including fixed) elements

For absolutely positioned elements, the sum of the element's horizontal properties must add up to the width of the containing block. Therefore the following equation must be observed.

Left + width + padding-left + padding-right + margin-left + margin-right + border-left-width + border-right-width + right = width of the containing block.

1. Left: auto becomes the distance from the left edge of the containing block to the left margin edge of where the box would be with position: static.
2. If the element is replaced, width: auto is replaced with the intrinsic width of the element.
3. If width: is still auto, replace left: and/or right: auto with 0.
4. If any of left, right or width are still auto, replace margin-left and/or margin-right: auto with 0.
5. If margin-left and margin-right are both still auto, solve the equation subject to the constraint that margin-left must be the same as margin-right.
6. If only one auto remains, solve the equality.
7. If no autos remain, and hence the equality is mathematically impossible, disregard right and solve the equality.

Height of elements

All replaced elements

Height: auto becomes the element's intrinsic height, and all other auto values become 0.

Inline non-replaced elements

All auto values are set to 0, and height is ignored.

[Block and floating] non-replaced elements

Apart from height, all auto values are set to 0. If height: auto, then if the element only has inline children, height is the distance from the top of the top line box to the bottom of the bottom one.

If it has block children, it is from the top border-edge of the topmost block child box (including anonymous boxes (i.e., those generated by the element itself)) to the bottom border-edge of the bottommost block child box.

Absolutely positioned (including fixed) elements

The equation is top + height + padding-top + padding-bottom + margin-top + margin-bottom + border-top-width + border-bottom-width + bottom = height of the parent.

1. Top: auto becomes the distance from the top edge of the containing block to the top margin edge of where the box would be with position: static.
2. If the element is replaced, height: auto is replaced with the intrinsic height of the element.
3. If both height: and bottom are still auto, replace bottom: with 0.
4. If bottom or height are still auto, replace margin-top and/or margin-bottom: auto with 0.
5. If margin-top and margin-bottom are both still auto, solve the equation subject to the constraint that margin-top must be the same as margin-bottom.
6. If only one auto remains, solve the equality.
7. If no autos remain, and hence the equality is mathematically impossible, disregard bottom and solve the equality.

Automatic margins and overconstraining

You might well have found the above a bit too much. It is very significant, however, so here's some examples of the significance that it has. Say you want to give an element a width of 50% and a right margin of 25%. You might think that you can do that with ELEMENT {margin-right: 25%; width: 50%}. Not so, however, since margin-left's initial value is 0, so that statement is equivalent to ELEMENT {margin-left: 0; margin-right: 25%; width: 50%}. Since the element's properties must sum to 100%, and 50% + 25% is only equal to 75%, it is necessary to disregard one of the values. That value is margin-right (as stated above), so in fact you will get a right margin of 50%. To avoid this problem, you would specify margin-left: auto, which would mean that the element is no longer overconstrained.

A similar example to this is the case where you wish to center the element (not the text in the element, the box itself). This would be done with a statement like P {margin-left: auto; margin-right: auto; width: 50%}. Since, if margin-left and margin-right are set to auto, the margins will be set to equal values, this will center the element. Thus it is equivalent to margin-left: 25%; margin-right: 25%; width: 50%.

Another important example is where you have positioned an element:

#fixed {top: 80%;
bottom: 0;
position: fixed;
height: 20%}

In this example the desired effect won't be achieved, since the element is overconstrained, as all of top, bottom, margin-top (initial value is 0), height and margin-bottom are set to a value other than auto, bottom will be ignored. To avoid this, you should set margin-top: auto, since this would remove the overconstrained nature of the element.

Examples

<P style="margin-left: 50%; line-height: 15px">
<br>
<br>
</P>

This would result in a P element with width equal to 50% of its containing block and 45 pixels high.

<P style="margin-left: 50%; margin-right: 0; width: 100%">
</P>

Since the P element is overconstrained, margin-right is ignored and therefore it is given margin-right: -50%.

Max-width, min-width, min-height, max-height

These properties specify the minimum and maximum widths and heights of elements; they apply to all elements except non-replaced inline and table elements, and are not inherited.

They specify a % (relative to containing block width in the case of width, or its height in the case of height) or a length. In addition, the max's may take the keyword 'none'. The mins are initially 0, and the initial max value is none.

They influence elements thus:

1. if it happens that the min value is greater than max, the max value is set to the min value
2. if the width (or height) that follows from the box model is greater than the max value, set the width (or height) to that value and re-solve the equality
3. if the width (or height) that follows from the box model equation is less than min-, set the value to min- and re-solve.

These are of use when you do not want to be constrained by an actual height or width, but want to ensure that your element does not exceed or go below a certain height. They are particularly useful in ensuring, for instance, that a table does not go beyond the page width.

For example, specifying P {width: 30%; min-width: 200px} could be used to make the P 30% of the width of the containing block wide, but a minimum of 200 pixels wide.