List Spacing, is it possible?

[defanjos]

Is it possible to alter the spacing between the lines of a list (UL or OL) with CSS?

I don't want this:
1 - line 1
2 - line 2
3 - line 3

I want this:
1 - line 1

2 - line 2

3 - line 3

Thanks

[Wertigon]

Yep - Just do it like this:

li {
font-size : 14px;
margin-top, margin-bottom : 7px;
}

[defanjos]

Great, thanks.

[Nick_W]

Actually, I beleive that syntax is invalid, though you're on the right track:

li {
  margin-bottom: 2em;
}

Should do it....

Nick

[defanjos]

Thanks, both methods work.

[Nick_W]

Hmm.. defanjos version didn't work for me on Opera. And I've not seen it done like that before....?

Nick

[Wertigon]

You're right Nick, my example is invalid according to the CSS validator.

li {
font-size : 14px;
margin-top : 7px;
margin-bottom : 7px;
}

Should work. I wonder why it's invalid though - I was under the impression you could specify the same value for multiple properties by separating them with a comma? Hmm...

[MWpro]

If you want both the top and bottom I would recommend just using the shorthand

instead of:
margin-top, margin-bottom : 7px;

do:
margin: 7px 0px 7px 0px;

I was under the assumption that you can only use the comma for what you are assigning it to, like
ul, li {
whatever;
}

[Nick_W]

I was under the assumption that you can only use the comma for what you are assigning it to, like

Yes, that's right. It's called grouping [w3.org]. That's where the small confusion came from I think ;)

Nick

[your_store]

A little late to the party, but another shorthand version is the following:

margin: 7px 0;

The first sets the top & bottom and the second does the left & right values.

While on the topic of list spacing, does anyone know of any research on how much spacing should be used between list items in relation to the text size? How about indenting for multiple levels?

[drbrain]

Grouping works only on selectors, not on properties. You have to specify properties explicitly, or use shorthand properties.

There are four ways to specify the top, left, bottom, right values for the border/margin/padding properties:

(from CSS2 section 8.3)
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

and of course:
BODY { margin: 1em 2em 3em 4em } /* top=1em, left=2em, bottom=3em, right=4em */

[TGecho]

That's very interesting. I can even think of a few places where that could be useful.

.redbox {
border-color, color : red;
}

Of course, since IE has the vast majority of the market share... *ducks*

Just kidding!