 Margins
Style sheets allow you to specify margins. What a nice addition to web
pages. No longer will text be shoved right up against the sides of the
browser, and no more extraneous tables to work around this. Well maybe not
all table workarounds will disappear, but they can be much simpler.
With margins you can format the text within tables or any HTML element.
Also you can indent single lines, whole paragraphs, image spacing, and
more.
There are 5 margin properties, well really 4 and 1 shorthand. These
properties are:
margin-top
margin-bottom
margin-right
margin-left
margin (shorthand)
The values they accept are lengths, or percentages. The
lengths are measured in pixels(px), inches(in), centimeters(cm),
millimeters(mm), font point (pt), font height (em), and picas (pc). The
percentages are relative to the object, which could be the whole page,
or 'inside' of another object, like a table. Negative values are accepted,
but be careful when using them.
Examples
P { margin-top: 10px; margin-bottom: 75px;
margin-left: 50px; margin-right: 25px; }
This will define the above margins for everything in paragraph tags.
Play with resizing your browser window, notice the margins stay the same
width. Click here for an example
The margin shorthand notation could have been used in the above and
would have looked like this:
P { margin: 10px 25px 75px 50px }
The shorthand order being top - right - bottom - left.
Some even nicer short cuts, if using similar values, can be used. To
set a 0.5in margin on each side you could use:
P { margin: 0.5in }
If you have the same top and bottom margins, and the same right and
left margins you can use the following shorthand notation:
P { margin: 0.5in 1.0in }
This would create a half inch margin top and bottom, and a full inch
margin on the left and right.
Here's a definition to indent text
.indent1 { margin-left: 5%; margin-right: 30%; }
.indent2 { margin-left: 30%; margin-right: 5%; }
Click here see example. It
shows shifting paragraphs around using margins, this probably could be a
quote or image in the now empty blank spots.
|
