Page 5 —
Margins and Padding
As we know, to make a margin using HTML, you have to use tables. But not any more. Stylesheets to the rescue ...
Some Quick Definitions
First, we need to understand the terminology of the stylesheets language. Every single block-level element or replaced element is contained in what the cascading stylesheets creators call a box. That box consists of:
- the element itself,
- the padding around the element,
- the border around the padding, and
- the margin around the border.
An illustration might help:
You can control the padding, border, and margin separately, as we're about to see.
margin-top, margin-bottom, margin-left, margin-right
These four properties enable you to control the margin around each side of an element, like so:
H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }
As you can see, each margin can be set differently. Or you can choose to set just one margin side and let the browser use its default margin sizes for the other sides. You can apply margins to replaced elements (e.g., graphics) as well as to text.
The most obvious way to set margin values is through the length units we discussed previously: px (pixels), pt (points), and so on. But you can also set margins using percentage values.
Let's look at a few examples:
When two margins meet, the browser adds the margins together. Thus, if this paragraph has a margin-bottom of 10 pixels ...
... and if this paragraph has a margin-top of 30 pixels, then the paragraphs should be separated by 40 pixels.
Can you overlap elements by using negative margin values? You betcha. Once again, this isn't the ideal way to layer elements on a page, but it is possible:
Books
are mind food.
If your browser doesn't support this CSS property,
click here to see what it looks like.
Above, "are mind food" has a top margin of -55 pixels and a right margin of 60 pixels.
A big drawback of using negative margins to overlap elements is that browsers handle margin sizes differently. For instance, when displaying the example above, each of the four main 4.0 browsers (Communicator for PC, Communicator for Mac, IE for PC, IE for Mac) overlaps the text a different amount. (Communicator for PC doesn't overlap the text at all!)
Another drawback is that you can't completely control what gets layered on top. Again, different browsers behave differently. Communicator, for example, always places graphics on top of text. IE seems to display elements in the order they are loaded into the browser window.
In other words, if you want to layer elements, don't use negative margins. The Lesson 5 installment of this tutorial will cover how to layer elements.
Here are some other notes about browser support:
- IE 3 will sometimes display extra space when you use ruler units (e.g., inches and centimeters) for margin-bottom. Also, some HTML tags work with margin-bottom, but many don't.
- IE 4 sometimes has problems giving left margins to replaced elements such as graphics. Try wrapping the image in a <DIV> and styling the <DIV>.
padding-top, padding-bottom, padding-left, padding-right
Padding (the space between the element and its border) works just like margin control. You can define padding size for the top, bottom, left, and right sides of an element.
H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }
Just as with margins, you can use any length units or percentage values. We won't bother to go into detailed examples, since these properties work so similarly to the margin properties. You should know, however, that you can't use negative values for padding as you can for margins. (Also, I'm sorry to report that IE 3 doesn't support the padding properties.)
Now let's talk about what's between margins and padding: borders.
next page»
|
