CSS2 Properties - the box model
A D V E R T I S E M E N T
The box model
Each HTML element is assumed to be in a box.
All HTML elements can have box model properties
applied to them. Box model properties do not inherit.
There are three properties here: margin, border and padding; these apply to
any element. In addition, the width and height of the element are also
important.
As to the difference between margin and padding, margin is the space outside
the element, and padding that inside it. Thus the padding color is the
background-color of the element, whereas the margin color is the
background-color of the parent element (except where the element doesn't have a
parent, as with BODY or HTML).
Note that although box properties do not inherit, a margin applied to the
BODY will affect all elements inside it, since they are all still inside BODY.
If they inherited, then if the BODY had a 2-inch left margin, P would start four
inches from the left of the page, etc.
The containing blockAll element have a containing block. Elements are usually aligned with the
edge of their containing block. In addition to providing a reference point for
alignment, the width and height of the containing
block is also used for interpreting the value of % on box model properties.
The containing block of normal static (static as opposed to positioned)
elements is their nearest block-level ancestor. For example, in <BODY><P>, the
containing block of the P element is BODY, and therefore margins, etc., on P
will refer to the width of that.
An element that has display: block generates a block box. This defines the
containing block for descendant elements. Note that content can go outside the
principal block box; for example, when content overflows its block, or list item
markers, which are placed in the margin of the box.
Bugs
All browsers have some problems with box properties. If all you want to do
is give the BODY a left, right and bottom margin you will be OK. Beyond
this, you may have problems, the most notable of which I detail below. IE
3.00 interprets all margins as relative to the left of the page rather than
the left of the element. This means negative horizontal margins will obscure
content, and as a rule of thumb, left margins should only be set on BODY.
Netscape 4.* does not support border-top, border-left, etc., so use
border-(top/left/right/bottom)-width, border-width or border, etc.
Box shorthandsThe box shorthand property allow you to specify the box style for all four
sides at once.
If one number is supplied in a shorthand, it is applied to all four sides; if
two numbers, the first number to the top and bottom sides, and the second to the
right and left; if three numbers, the first number to the top side, the second
to the right and left sides, and the third to the bottom side; if four numbers,
to the top, right, bottom, and left sides in that order.
Thus by these rules P {margin: 10px 5px} is applied as a 10 pixel vertical
and 5 pixel horizontal margin.
MarginClearly each element can have four margins - left, right, bottom and top.
These are defined by the margin-left, margin-right, margin-top, margin-bottom
properties.
The margin can be specified in any length, a percentage, or using the auto
keyword. The percentage refers to the width of the
containing block, regardless of whether it is applied to the left and right
or top and bottom margins.
In addition, the margins can be specified for all four sides at once with the
margin shorthand. Margins can be negative, and initially margins are 0.
It is important to note that in CSS, margins collapse vertically (except
where one or more of the margins is a floating margin). This means that where
two margins adjoin vertically, the margin is not equal to the combined total of
the two margins, but rather to the larger of the two (except where both margins
are negative, in which case the combined margin is equal to the most negative of
the two margins; and where one margin is negative and the other positive, the
combined margin is equal to the two margins added together). However, margins
between floated or positioned elements and any other element do not
collapse.
Margin examples
P {margin-left: 2in}
This would give P a left margin of 2 inches.
P {margin: 1em}
This would make all four of P's margins 1 em wide.
P {margin: 1px 2in 3cm 4pt}
This would give P a top margin of one pixel, a right margin of 2 inches, a
bottom margin of 3 cm and a left margin of 4 points.
P {margin-top: 1in;
margin-bottom: .5in}
<P>
Some text
</P>
<P>
Some more text
</p>
The combined margin here would be 1 inch because of margin collapsing.
PaddingPadding differs from margins insofar as padding does not collapse. In
addition, although it is usually impossible to distinguish between padding and
margin on the screen, padding is of crucial importance when an element has a
rendered border, such as in a table or box, or where the element has a different
background color from its parent.
As before, padding-left, padding-right, padding-top, padding-bottom or the
padding shortcut can all be specified. If a percentage is specified, it relates
to the width of the
containing block.
Padding cannot be negative, and initially padding is 0,
although browsers' built-in style sheets may increase this for certain elements.
BorderThe relevant details here are the width, color and style of the border.
The border width is specified with border-bottom-width, border-top-width,
border-left-width, border-right-width, or the border-width shorthand, which
allows specification of 1-4 widths, applied according to the rules stated under
Box shorthands.
It should be noted that percentages cannot be specified and nor can negative
lengths, and that width can be alternatively (rather than as a length) be
specified as thin, thick or medium, where medium is the initial value.
For example: P {border-width: 10px}.
To make the border visible, one must specify a border style.
Border styles are specified using border-left-style, border-right-style,
border-bottom-style, border-top-style and border-style. Valid border styles are
none, hidden (same as none except on tables), dotted, dashed, solid, double (two
lines), groove (the border appears to be carved into the screen), ridge (the
border appears to be coming out of the screen), inset (the entire box appears to
be carved into the screen), or outset (the entire box appears to be coming out
of the screen).
Initially the border-style is set to none, so if you fail to override
this, no border will be drawn.
You can specify up to four border styles, which are applied according to the
rules stated above under Box Shorthands.
For example: P {border-style: solid}.
Note that if border-style: none (i.e., if border-style: none is not
specifically overridden), this overrides any specified border-width, and makes
them 0.
You can also specify a color with border-left-color, border-right-color,
border-top-color, border-bottom-color or border-color. You can specify up to
four colors, which are applied according to the rules stated above under Box
Shorthands or transparent. Initially the border color is set to
the element's color.
For example: P {border-color: red}.
You can set the border style, color and width simultaneously with the
border-left, border-right, border-bottom, border-top or border shorthands. It
should be noted that only one of each can be specified - if you use the border
shortcut, you are giving each side the same width of border, the same color and
the same style.
BODY {border-left: thick} /* Since border style has not been
specified, this would result in no border. */
|
