how to increase vertical spacing between UL or OL items

[Dave]

Hi,

what Property and Values are used to space out further from one
another the items in a list (assuming it's possible)? The default
presentation is a bit "bunched up" for me.

Thanks,
Dave

[Jeremy Collins]

Dave wrote:

what Property and Values are used to space out further from one
another the items in a list (assuming it's possible)? The default
presentation is a bit "bunched up" for me.

I use:

li {
margin-left: 0;
margin-right: 10%;
margin-top: .5em;
margin-bottom: .5em;
}

(The margin-right makes the LIs shorter than the paragraphs
around them which suits my purposes).

You could also try line-height:150% (I think anything over 120%
is larger than most browser defaults).
--
jc

Remove the -not from email

[e n | c k m a]

> I use:

li {
margin-left: 0;
margin-right: 10%;
margin-top: .5em;
margin-bottom: .5em;
}

Or...

li {margin:.5em 10% .5em 0}

the margin or padding properties (on either the top, bottom or both) should
work just fine.

[Jukka K. Korpela]

Jeremy Collins <jd********@ntl world-not.com> wrote:

You could also try line-height:150%
Well, yes, but it has a quite different meaning. Using margin-top and
margin-bottom for li elements is fine. One just needs to remember that
vertical margins don't add up. If you specify
li { margin-top: 0.5em; margin-bottom: 0.8em; }
then the distance between list items is not 0.5em + 0.8em but larger of
0.5em and 0.8em.

The line-height property sets the line height within an element. While
this may create the impression of separation of list items, it's
deceptive. When the display area is narrowed, so that list item
contents wrap, the effect is probably rather disturbing.
(I think anything over 120%
is larger than most browser defaults).

Probably so, despite the fact that CSS specifications recommend that
the default be between 1.0 and 1.2 and even uses the following settings
in the sample style sheet (which is presented as non-normative, yet as
recommended browser default style, and also presented as summary of
actual study of browser behavior, despite the fact many features there
have just been made up):
CSS 1: line-height: 1.1
CSS 2: line-height: 1.33 (above the range recommended in the spec!)
CSS 2.1 CR: line-height: 1.12

What browsers actually use seems to be near 1.2.

The conclusion is that due to this confusion, and due to the fact that
1.2 is too small for many fonts (especially for sans-serif fonts when
line length is large, as it may well be on the Web), authors should
probably set the body element's line-height to a reasonable value
like 1.25 or 1.3. I would use plain numbers due to problems of
inheritance. (If you set e.g. line-height: 150% for a li element, then
the line height inside the element will be 150% of the element's font
size, even in subelements which may have different font sizes - since
the computed value is inherited, not the percentage, but for plain
numbers, it's the number that gets inherited, and gets interpreted in
relation to each element's own font size.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Jeremy Collins]

Jukka K. Korpela wrote:

[snip]

There were a few issues there I wasn't aware of; thanks
for taking the time to reply.
--
jc

Remove the -not from email

[Jeremy Collins]

e n | c k m a wrote:

I use:

li {
margin-left: 0;
margin-right: 10%;
margin-top: .5em;
margin-bottom: .5em;
}

Or...

li {margin:.5em 10% .5em 0}

I can *never* remember the correct order for those one-line
shortcuts! My background is programming, and I'm used to
working with RECT structures where the convention is left,
top, right, bottom. The CSS order of top, right, bottom, left
is counter-intuitive to me (although remembering that they're
both "clockwise" might help).

--
jc

Remove the -not from email

[Neal]

On Sat, 06 Mar 2004 09:00:24 +0000, Jeremy Collins
<jd********@ntl world-not.com> wrote:

I can *never* remember the correct order for those one-line
shortcuts!

I remember CSS starts at noon. Or midnight, and if you're the time cube
guy it's like 4 days ago.

[Eric Bohlman]

Jeremy Collins <jd********@ntl world-not.com> wrote in
news:Hpg2c.2241 $54.2210@newsfe 1-win:

e n | c k m a wrote:

li {margin:.5em 10% .5em 0}

I can *never* remember the correct order for those one-line
shortcuts! My background is programming, and I'm used to

You mean you have TRouBLe remembering the order?

[Jeremy Collins]

Eric Bohlman wrote:

Jeremy Collins <jd********@ntl world-not.com> wrote in
news:Hpg2c.2241 $54.2210@newsfe 1-win:

e n | c k m a wrote:

li {margin:.5em 10% .5em 0}

I can *never* remember the correct order for those one-line
shortcuts! My background is programming, and I'm used to

You mean you have TRouBLe remembering the order?

Cute - I'm sure it'll stick now!

--
jc

Remove the -not from email

[Stephen Poley]

On Sat, 06 Mar 2004 09:00:24 +0000, Jeremy Collins
<jd********@ntl world-not.com> wrote:

e n | c k m a wrote:

I use:

li {
margin-left: 0;
margin-right: 10%;
margin-top: .5em;
margin-bottom: .5em;
}

Or...

li {margin:.5em 10% .5em 0}

I can *never* remember the correct order for those one-line
shortcuts! My background is programming, and I'm used to
working with RECT structures where the convention is left,
top, right, bottom. The CSS order of top, right, bottom, left
is counter-intuitive to me (although remembering that they're
both "clockwise" might help).

In other words - you have TRouBLe remembering them.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/