CSS and lists

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hi all!

I'm just learning html and css coding and would like to know if it's
possible to add an additional blank line in between each list element
in css... or do I have to put a manual line break (ie., a br tag) after
each list element.

I tried using "line-height" but that would change the line height of
wrapped text as well. D'oh!

Thanks guys!


Re: CSS and lists

sachaburnett@yahoo.com wrote:
Quoted text here. Click to load it

Change the margin-top and margin-bottom of the LI, try 2em and see what

Take care,

Re: CSS and lists

On 26 May 2006 15:54:11 -0700, sachaburnett@yahoo.com wrote:

Quoted text here. Click to load it

Don't (EVER !) "add blank lines". Instead take the break you already
have and make it render into a larger size.  

Adjust the margin-top and margin-bottom properties of <li>

You _might_ change padding-top and padding-bottom too, if you understand
the CSS box model. Try changing the background colour on <li> first and
seeing what effect these changes have.

Be aware that the default stylesheet for <ul><li> is different between
browsers. Some space the lists with margins, some with padding. If you
want to change these values consistently across browsers, set all of
them (even if you set most to 0).

Re: CSS and lists

Andy Dingley wrote:

Quoted text here. Click to load it

Thanks, this is good to know.  I just assumed they were all alike but
IE'll catch ya every time.

Is using the <ul> margin to indent the lists just an IE thing?  Is there
anywhere that states what UA's should be doing? [I don't know weather
this is a CSS or an HTML issue.]

On top of IE I only have FF and Opera (9 beta).  FF and Opera
use <ul> padding to indent the <li>'s.

Brian O'Connor (ironcorona)

Re: CSS and lists

Quoted text here. Click to load it

Hardly. But does it matter?

Quoted text here. Click to load it


It's neither. The HTML specs don't say that lists must be indented, still
less how that should be implemented. The CSS specs do not specify any
requirements on a browser's default style sheet.

What comes closest are the "sample style sheets for HTML" in CSS specs. They
are claimed to document existing browser practice - which is largely an
incorrect statement - and they are also presented as "suggested" default
style sheets.  In practice, nobody takes them very seriously. Anyway, CSS
2.0 and the CSS 2.1 draft have
   ul { margin-left: 40px; }
which is of course poor policy (using the em unit would be better).

CSS 1 is an improvement over its successors, in setting the value in em
units, but it also sets the indentation by setting left margin for list
items, not the list as a whole:
   li { margin-left: 3em; }

Anyway, if you try to set the indentation of lists, you should explicitly
set both left-margin and left-padding, for both the list and for the list

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

Site Timeline