How much pixel space does a <li> element add?

Trying to work out how much width a <li></li> is

[Ericthemad]

I'm trying to switch away from using table based layouts (aren't we all). Really only been looking hard at it this weekend, and after the initial fear I think I'm seeing the light (apart from the usual hideous browser quirks).

I'm converting all my navigation to lists. Normally I will precisely design the graphics required to the exact pixel size I want, slice them up and drop them into a table with 0px padding and borders to hold them in place. I don't ever design fluid layouts.

Now if I use

<ul>
<li>
<img src="images/top_header.gif" width=100 height=20 alt="top" />
</li>
<ul>

After I've added more of the images into the list, they ought to take up the precise width of the sum of the image widths.

However they don't. My <ul> and <li> tags are styled to have 0px borders etc. But they are DEFINITELY taking up space.

So the obvious question is how wide is an empty <li></li>?

Its rather important to know when designing graphics how much space the "furniture" used to create the structure of the page is taking up so I can compensate for it.

[ronin]

Are the paddings and margins on both the list items and the list itself specified as 0?

[createErrorMsg]

To ensure that the LI doesn't take up more room than necessary, do two things: (1) as ronin says, set the padding and margins on the UL, the LI and whatever is contained inside of them to 0. (2) Set list-style-type to none.

cEM

[Ericthemad]

Thanks guys, Css below.

#content ul {
position: relative;
text-indent: 0px;
margin: 0px;
padding: 0px;
}

#content li {
display: inline;
list-style-type: none;
margin: 0px;
padding: 0px;
}

However they <li> or <ul> are still taking up space. My question is: How much space?

If you guys are sure that these tags should take up any space then I'll keep looking, but if they do take up space, as long as I know how much, then I can compensate.

I don't understand why they should take up space as a tag itself like a <td> or a <a href> takes no physical space....

[jetboy]

It gets a little clearer with the display: inline;. So you've got a bunch of images each in different <li>s in a horizontal row? And there are gaps between them?

Well, if you're displaying elements inline, any line breaks in the source *should* translate to visible spaces. If this is what you're seeing (and presumably not in IE, because it doesn't follow the spec) then the gap between your images is precisely one space wide!

So either drop your font size down to 0px (no idea if this works, but it's worth trying), or remove display: inline; and put float: left; in its place.

Edit: And float the images, and preferably the <ul> too. Use clear: left; on the next element to clear the floats.

[Ericthemad]

[snip]

I think you're bang on the money. The inline thing means I'd have to strip all the whitespace; and I want that there for legibility.

At the risk of sounding stupid... Float left means its moved out of the flow of the document, hence any other "relative" or "inline" items below it would shuffle up as if the "float" did not exist?

[edited by: createErrorMsg at 9:42 pm (utc) on Sep. 26, 2005]
[edit reason] No URLs please. See forum charter for details. [/edit]

[jetboy]

Floating the <li>s left will put them in a horizontal row.

Floating the <img>s left will force the <li>s to contain them.

Floating the <ul> left will force it to contain the <li>s (and the images).

If a container *only* contains floated elements, and it isn't floated itself, it will collapse as if it had nothing inside.

You're right, this will take all of these elements out of the flow, so you need to use:

clear: left;

on your next element to force it to display below any left floated elements above it, or:

clear: both;

to clear both left and right floated elements.

[Ericthemad]

Ok.

clear: is a new one of me.

Time for more reading, and finding which browsers break it all into pieces.

Thank you!