This article—the first of two—covers vertical sizing and shows
how to determine the height of elements with
CSS. The second article covers horizontal sizing. Once you’ve mastered both height and width, you
should be well on your way to effectively using
CSS.
In planning the design of a page, it is very important to
know how the elements will be positioned. CSS has visual
formatting rules which, while straightforward, may not be
familiar to many authors, perhaps because some of the rules seem
non-intuitive at first glance. That’s due in part to the
fact that layout issues can be much more complex than, say, font
selection.
Every element in CSS has two aspects which control the
layout: height and width. Given the advanced state of CSS support
in Macintosh browsers, the topics discussed in this 2-part article
should work quite well. It’s a good thing, too, because
these are basic formatting that make the rest of CSS work much
better.
Height
For most elements, height is automatically determined by the browser. For images, the height is intrinsic, and will only change if the author declares a specific height value which is different than the intrinsic height. For text elements, the height is by default auto, which allows the element to be as tall as necessary to display the contents of the element. For example, if you decrease the width of a paragraph, it will grow in height.
It is possible to set an explicit height for a text element, but browsers are permitted to ignore such declarations, and in general that is what they will do. In fact, even if a browser will honor a height which will make the element taller than it would naturally be, it will usually ignore values which would make the element too short to display its content. (This is not of positioned elements; browsers will always obey, so far as they are able, height values for positioned elements.)
Margins
Unlike padding or borders, margins can be negative. When it comes to left and right margins, negative margins make an element wider than usual. What happens with top and bottom margins? While the answer depends on the actual margin in question, the results are consistent.
If a top margin is negative, it has the effect of dragging the element upward. Assume you have an image following a paragraph, and that image has the following style:
<img src="pic7.jpg" style="margin-top: -50px;">
The image will be shifted 50 pixels upward on the screen, which will likely cause it to overwrite portions of the paragraph which came before it.
If a bottom margin is negative, then anything which follows the element will be pulled upward. Thus, if we change our image’s styles to this:
<img src="pic7.jpg" style="margin-bottom: -50px;">
The image will not be pulled upward into the paragraph before it, but a paragraph following the image will be pulled upward to partially (or completely!) overwrite the image. If the paragraph has a background of some kind, then the image may be totally obscured. If the paragraph’s background is transparent, then it is likely that the image will be visible through the content of the paragraph.
Far more important to understand is the handling of adjacent vertical margins. For example, if all paragraphs have a quarter-inch margin, and one paragraph follows another, then how much space should be between them? Straightforward math would suggest that the two quarter-inch margins would add up to half an inch of space between the elements; however, this is likely not the effect an author would desire.
CSS will treat these margins the way authors would prefer: there will be a quarter-inch of blank space between the paragraphs. This happens due to the collapsing of adjacent vertical margins. When two margins are precisely adjacent to each other along the vertical axis, then the smaller one is effectively reduced to zero. For example, consider a heading immediately followed by a paragraph and given the following styles:
H1 {margin-bottom: 0.5em;}
P {margin-top: 0.75em;}
The margins are collapsed together, leaving 0.75em between the H1 and the paragraph.
You should also know how collapsing effects negative margins. Any negative margin is added to the maximum of any positive adjoining margins. This reduces the positive margin (since adding a negative value is the same as subtracting a positive value) to arrive at the separation between the two elements. For example:
P.one {margin-bottom: 1em;}
P.two {margin-top: -0.75em;}
The result of these styles is a quarter-em of blank space between the two paragraphs (assuming P.one is immediately followed by P.two, of course).
Given the strangeness of negative margins, why would you use it? There is the possibility of floating an image to one side of an element, and then using a negative top margin to pull it upward in the page. This could be used, for example, to make sure an image which occurs at the end of a section will appear within that section. However, since user agents are not required to re-flow documents based on negative-margin, the image might end up overwriting parts of that section. Since there’s no clear statement on whether or not this will happen, it’s safe to assume that different browser will react differently.
On the other hand, you can use negative margins to make elements wider than they otherwise could be, or to cause an overprinting effect. You’d probably use these effects rarely, but you may have some design need for it. Try this as an example:
h3.first {letter-spacing: 0.5em; font-family: monospace;
margin: 0; color: red;
}
h3.second {letter-spacing: 0.5em; font-family: monospace;
padding-left: 0.5em; margin: 0; margin-top: -0.75em;
color: purple;
}
Inline Elements
The height is not property permitted on inline text elements. If top or bottom margins are set, they will have no visual effect, as margins do not affect the line-height calculations.
Images
Since images have an intrinsic height, the value auto is always replaced with the intrinsic height of the image, and the height can never be overridden by the browser. The author can change the displayed height of an image by assigning an explicit value, thus scaling the image.
Thus, if an author wants any image with a class of scaled to be exactly fifty pixels tall, he could write:
IMG.scaled {height: 50px;}
Assuming the width is set to be auto (the default value), then the image will preserve its original aspect ratio. Otherwise, it will be stretched to fit the declared height and width. It is also possible to scale images with percentage calculations. For example:
IMG.scaled {height: 150%;}
The image will now be half again as tall as its intrinsic height.
Additional Information
|
