margin-top/bottom on <li> items

[markwm]

Is it not possible to get a top margin in the first item item in a list? even if I set margin-top to 300px the very first list item doesn't get it, even though all the ones below do.

Just the same as I can't get a bottom margin to appear on the last list item.

It seems to only appear if the surrounding <ul> has padding

ul {
width: 200px;
background-color: red;
padding: 1px;
margin: 0;
}
li {
list-style-type: none;
margin-top: 1px;
background-color: yellow;
}

[edited by: markwm at 8:00 pm (utc) on Mar. 15, 2007]

[sgietz]

If you want the entire list to have a top and bottom margin, you should set that at the <ul> level.

[markwm]

I've tried both, I either get 0 margins as I explained in the first post. Or if I add a 1px margin to the <ul> I'll end up with 2px margins.

[londrum]

if they're supposed to be buttons, then you could just do away with the margins altogether and do a border-top of 1px on the list items instead.
you can always color the border to be the same as the background colour, if you don't want it to show.

[Setek]

It sounds like your example code isn't showing the exact problem - is there anything else affecting your

ul

?

And is this happening in all browsers? Just IE 6? Just Firefox 2?

If you want the entire list to have a top and bottom margin, you should set that at the <ul> level.

This is pretty correct - although in some contexts it won't work (e.g. bottom margins on absolutely positioned elements don't show...)

It almost sounds like a margin-collapsing problem, but there's 1px of padding on the

ul

in the OP example...