[WSG] CSS list spacing: margin or line-height?
I've noticed that the CSS 'line-height' property provides extra
spacing between list items, such as in an ordered list, unordered
list, as well as definition lists.
In the past, I've always used the 'margin' property to add spacing
between list items.
IE:
ul li
{
margin-bottom: 5px;
}
However, this works just as well:
ul li
{
line-height: 20px;
}
Both seem to do the trick, in many browsers.
I was wondering if anyone else uses 'line-height' - or do most people
use 'margin'?
Which would you think is more correct, in terms of 'CSS semantics'?
And please don't just point to a CSS 'line-height' or 'margin'
specification. I want to know you think, first...
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS list spacing: margin or line-height?
G'day I've noticed that the CSS 'line-height' property provides extra spacing between list items, such as in an ordered list, unordered list, as well as definition lists. ... I was wondering if anyone else uses 'line-height' - or do most people use 'margin'? I'd stick with margins (or padding) unless you also want extra white-space between lines in a list item if the items wrap. Example (simulated as this is plain text email): * First list item * Second list item does not fit on one line. Using line-height the second line would be a long way from the first... * Third list item Would the following not be better? * First list item * Second list item does not fit on one line but since we use margin, the lines stay together * Third list item Margin, padding and line-height are presentational attributes, which is why we use CSS for them. I don't think semantics come into it. But I may be wrong. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS list spacing: margin or line-height?
Matt Thommes wrote: I've noticed that the CSS 'line-height' property provides extra spacing between list items, such as in an ordered list, unordered list, as well as definition lists. I try to favor line-height rather than padding if I'm dealing with an element that is styled with a height declaration (because of IE5/Win's broken box model). So for horizontal lists, I use: line-height: X min-height: X and then height: X for MSIE This technique has the advantage of centering the text vertically without the need of padding. It works with vertical Lists too, but there is a bug in Gecko browsers that would randomly create a small gap between some of the list items. Thierry | http://www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
