|
||||||||
|
The first thing that one needs to decide upon when setting margins is what units to use.
You should use ems on vertical margins and % on horizontal margins.
The reason for this is that on both vertical and horizontal margins, percentages relate to the width of the containing block (i.e., to the nearest block-level ancestor).
Since horizontal margins should relate to the width of the container, you should consequently always use % on horizontal margins. Vertical margins should relate either to the line height of the element (which should be proportional to font size) or the font size of the element (definitely not to the width of the container). In either case, the appropriate unit is therefore the em.
As you will know if you've followed this master class through from part 1, the em is buggy in Netscape and unsupported (treated as pt) in Internet Explorer 3. However, it will be quite simple if you have read RichInStyle.com's guide to fonts to convert these to pixels.
As regards percentages, in Internet Explorer 3, 4 and Netscape, margin percentages are related to the width of the viewport (i.e., the width of the window in which pages are rendered) rather than the width of the containing block. This is not totally catastrophic, since it typically results in error of at most 18% (e.g., if you have BODY {margin: 0 9% 0 6%}, where margin declarations should therefore relate to 0.85w, where w is the width of the viewport, but in the buggy browsers would relate to w; declarations therefore being w/.85w = 1.176 times too large). Therefore I would recommend that you retain the margin declarations in %, in spite of the bugs. 18% is not significant amount. For example, the outdented headings on this page have margin-left: -4%. The difference that margin-left: -5% would make is not noticeable.
As a matter of principle, I recommend that rather than using the margin-left, margin-right,
margin-top and margin-bottom properties, you should use CSS' margin shorthand. This is
because I recommend that you set margins on all four sides anyway in order to avoid conflicts with
browser and user style sheets (see
RichInStyle.com's guide to creating perfect style sheets for more on this topic). In addition,
the margin shorthand is much shorter than the individual properties.
It allows the setting of all four margins at once. If four numbers are specified, the first refers to the top margin, the second to the right margin, the third to the bottom margin, and the fourth to the left margin. If only three, then the first refers to the top margin, the second to the right and left margins, and the fourth to the top and bottom margins.
Aside from that, it is important to note that CSS ensures that the margins behave as one would expect. The most important thing to note is that when you specify P {margin-top: 1em; margin-bottom: 1em}, you expect the distance between P elements to be 1em. This is the case in CSS - when two margins adjoin, the combined margin height is equal to the maximum of the two margins, not the total of the two.
There are also some important thing that you should do:
Correctly set margins have an enormous positive influence on a page, but it can be tricky to decide to which values you should set them. As regards vertical margins, it is generally easier to make a 'correct' aesthetic decision than with horizontal margins. My recommendation would be that you should set vertical margins on every element to equal values, with the exception of headings, where you should set the bottom margin to be much smaller than the top one.
The reason that I make this particular recommendation (regarding headings) is that headings look best when they appear to be associated with the text that follows them, but be kept well down from previous text.
Particular values are a matter of personal taste, but I recommend values between 0.4em and 0.8em on P and LI (P and LI should be subject to identical styles), top margins on headings of about 0.8em, bottom margins of 0, etc.
There are essentially two decisions with respect to horizontal margins. The first of these is how much margin is appropriate on BODY, and the second whether or not to use outdented headings.
To deal with the last of these questions further, it is almost certainly a bad idea to have outdented headings when there is a relatively small amount of textual content between headings. Furthermore, with certain types of pages, it is also inappropriate; for example, they are not appropriate on largely navigational pages.
With text-based documents, however, outdented headings help by enhancing the white space. They serve a useful function in drawing the eye down the page, and also in breaking up otherwise daunting looking documents, and creating a generally more attractive impression of the page.
As a result, if you are delivering large quantities of information, it is usually a good idea to improve its presentation by using outdented headings, but if on the other hand you are simply creating glossy pages to promote a product, you almost certainly should not.
As to the width of margin on BODY that is appropriate, I recommend a value of anything up to 10% on margin-left, and up to 8% on margin-right. Generally, it is better to set margin-right slightly lower than
The main browser issues relating to margins, apart from margin units, which have already been discussed, relate (as usual) to Internet Explorer 3 and Netscape. In IE 3, the main problem is that you must not use margin-top, including via the margin shorthand. This includes setting it to 0. However, there is another serious problem in IE 3, and that is that in IE 3.0 (not 3.01, 3.02 or 3.03) for Windows, all horizontal margin declarations are interpreted relative to the left or right of the viewport, rather than the left or right inner edge of the element's containing block. You can use margin-bottom, because IE 3 doesn't support it.
There is no way to avoid this bug without using JavaScript, but luckily, RichInStyle.com provides just the thing you need - without you it can't offer things like BODY {margin-left: 8%} H1 {margin-left: -5%} to IE 3 users. Finally, the other problem in IE 3 is that you must not specify margin-left on BLOCKQUOTE, OL or UL, nor margin-right on BLOCKQUOTE. This rules out the possibility of indenting each element individually and indenting H elements less rather than using negative margins.
With Netscape, the main problems are that if you do not use pixels (or ems, % or exes, but these are too buggy), a page break will be caused before and after each element when printing (typically documents will be hundreds of pages long as a result).
Further to this, you must not set vertical margins on H?, PRE, OL, UL, DL or BLOCKQUOTE. If you do, they will be added to the default. Added to this is fact that you must also not specify margins on LI (nor indeed any style at all), otherwise horrendous bugs are triggered.
Thus concludes this section of RichInStyle.com's guide to margins. To continue to the next section, which considers color, click here.
Copyright © RichInStyle.com 2000; all rights reserved. See copyright document for terms of use. Please visit Bukit Lawang flood appeal.