HTML, XHTML & CSS

Chapter 10: Using Cascading Style Sheets
You’ll note that we also set the line-height at 0.2em. This ensures that menu
line entries are compact, without too much white space between individual
elements.
Note that several properties in the declaration, called shorthand properties,
take multiple values, such as margin and padding. Shorthand properties collect
values from multiple related CSS properties (such as margin-height,
margin-width, and so forth). See our online materials for a complete list.
Those values correspond to settings for the top, right, bottom, and left edges
of the navbar’s box. margin creates an empty zone around the box, and
padding defines the space between the edges or borders of the box and the
content inside the box. Here are the rules that explain how to associate values
with properties that deal with margins, borders, padding, and so forth:
✓ If all the sides have the same value, a single value works.
✓ If any side is different from the others, every side needs a separate value.
It’s okay to set some or all of these values to 0 (zero) as you see fit; this
can often help to ensure that pages display consistently across a wider
range of browsers (and browser versions).
To remember what’s what, think of the edges of an element box in clockwise
order, starting with the top edge: top, right, bottom, and then left.
Notice that we define margins and padding using px (pixels) rather than pt
(points) or em (default character m’s width) as our unit of measure. This is
a deliberate departure from best practices that we recommend elsewhere in
this book (Chapter 11). That’s because margins and padding usually involve
small increments or values and because those things relate very strongly to
individual actual displays within specific browsers. Experiment with these
values to get them just right, and be sure to check them on as many different
browsers and platforms as you can to ensure that visitors to your Web site
see what you intended.
Positioning
CSS provides several ways to specify exactly where an element should
appear on a page. These controls use various kinds of positioning based on
the relationships between an element’s box and its parent element’s box
to help page designers put page elements where they want them to go. The
kinds of properties involved are discussed in the following sections.
Location
You can control the horizontal and vertical locations of an image. However,
when you use absolute positioning with any page element, you specify
exactly where that element must sit, relative to the upper-left corner of the
151