TIPS - CSS: Professional Techniques for Modern Layout - page 88

h e inline links are lot less user-friendly—there's less area to click. Accordingly, if we want to
do background hover ef ects on the links, the inline links will only “light up” behind the text,
not in the whole box.

Getting to block-level links is really easy.

#sidebar ul a { display : block ;}

h at's all I needed to get the block-box links into Figure 3-12.

When a link generates a block box, it acts exactly like the boxes usually generated by para-
graphs, headings, div s, and so on—because it's exactly the same kind of box. You can give it
padding, margins, and all the rest.

MARGIN OR PADDING?
Have you ever thought—I mean, really thought—about the indentation of lists? Or the “gutter
space” that surrounds a page by default? If so, have you thought about how they're created?
Because it turns out there's no universally correct answer.

Let's take the space around a page's content for a starter. As most people know, there are about
8 pixels of space that separate the page's content from the edges of the browser window. As
shown in Figure 3-13, you can remove that space with reset styles, or by styling the body
element itself. But how should you style it? Are you removing a margin, or removing
padding?

90

If you want to be cross-browser friendly, the answer is both. h at's because most browsers
create the gutter with an 8-pixel margin, except Opera, which does it with 8 pixels of padding.

Now, before you start looking up ancient Norwegian curses, realize that nobody is in the
wrong here. h ere's no specii cation that says exactly how to create the gutter (or even that
there needs to be one). h ere's a strong argument to be made that padding is a better choice
than margins here. h at really doesn't matter, though, since there's disagreement between
browsers. So:

body { padding : 0 ; margin : 0 ;}

h at will eliminate the gutter in all known browsers. (Well, except for Netscape 4, but do you
really care?)