Like background colours, margins and borders make most sense when assigned to tags that create blocks or paragraphs, including the body tag. Values can be given as pt (point), px (pixel), pc (pica), cm, mm, in, % (of default). Margins refer to the parent element, e.g. the preceding text element, the frame or table inside which the tag appears or, in case of the body tag, the window frame.
The body tag of this page has a margin of 1 cm on all sides: body { margin:1cm }
A problem may arise if you have tables of a fixed width (e.g. 100%) on your
page: When viewed without style sheets, the tables might look rather strange. As a
workaround, either let the table width float or do without body margins.
You can specify 1-4 values:
{ margin: 1cm } /* will result in 1cm on all sides */
{ margin: 1cm 2cm } /* 1cm top and bottom, 2cm left and right */
{ margin: 1cm 2cm 3cm /* 1cm top, 2cm left and right, 3 cm bottom */
{ margin: 1cm 2cm 3cm 4cm } /* 1cm top, 2cm right, 3cm bottom, 4 cm left */
|
In oder to specify a margin for only one or two sides of the element, these are the definitions to turn to. By using negative values,
you can
make text
overlap.
Specifies an indentation for the first line of a multi-line paragraph like you usually see in books. Very good for long texts.
Aligns elements vertically in relation to each other, similar to what you can do with "td" and "img src" tags. Even the possible vaues are similar: top, middle, bottom, baseline, sub, super, text-top, text-bottom.
Aligns text horizontally like what you know from table cells. Possible values are left, right, center and justify.
Possible values are, apart from the usual numeric values (1cm, 20px etc): thin, medium and thick. The border around the "navigation bar" at the bottom of this page is medium. MSIE only displays a border if you specify a border style (see below) as well. Moreover, it displays the border over the whole width of the window, while Netscape draws it only as far as the element goes. If you want the same result with each browser, specify a width for the element. border-width can be broken down to border-top-width, border-bottom-width, border-left-width and border-right-width. If you define a border for only, say, the bottom, you'll get an underline.
Specifies what kind of border is to be displayed: A simple line, a 3D-effect, a dotted line? Possible values are none, dotted, dashed, solid, double, groove, ridge, inset, outset. Both browsers ignore one or two of these values - different ones, of course. Netscape ignores border-style altogether unless border-width is specified.
Possible values are RGB and the standard colour names.
border-color, border-style and border-width can be combined in one single definition,
but it would lead too far to list all possibilities here. Let two examples suffice -
the rest is up to experiment.
{border-right:double 2cm #DDFFDD } and { border:ridge 2cm #DDFFDD }.
Similar to cellpadding in a table, padding creates an element-internal margin, e.g. between text and the surrounding border, or between the edge of the text itself and a background image.
back to colours and
backgrounds
this was it for the moment. happy experimenting!
