Remove Extra Space at Bottom of HTML List Item

Question

Is there any way to remove the extra space displayed at the bottom of an HTML List Item tag without setting a fixed height on the list item? I.e. I would like the li

Answer 1

This should do it for you.

ul{margin-bottom:0}

Answer 2

Set line-height:0; on the LI

li {
  line-height: 0;
}

Here's a jsfiddle to prove that it works - http://jsfiddle.net/jm9Tj/

Answer 3

There is probably a default margin or padding on the img element in the browser you are using. You can remove this using something like this:

li img {
    margin: 0;
    padding: 0;
}

As different web browsers use different default styles it's recommended that you use a reset stylesheet. This sets a whole load of stuff to sensible defaults so you get more consistent styling across browsers. Because it resets everything to sensible defaults you should always load the reset stylesheet before any other stylesheets.

As @Saeed mentioned there is a good reset stylesheet as well as more information on why you should use them here.

Answer 4

li is wrapped in ul, which by default has some padding. Therefore as @Michael said, you have to zero out the padding of the ul element.

To avoid these problems, always try to use reset.css.

FYI: Browsers apply a default CSS on web pages. That's why you see h1 elements that big when there is no CSS in your site. Because browsers have a default CSS. And since browsers come from different companies, they have different default CSS. For example, a browser may use 10px of margin for paragraphs, while another browser user 12px. This means that you have always inconsistencies in your design. But a CSS reset is made of some general rules that removes these default CSS styles.

Answer 5

This is your code: http://jsfiddle.net/23LcK/

The gap is nothing to do with the lis. It's the space reserved for descenders in letters like g and p (because the imgs are inline elements).

You can remove it with any of these applied to li img:

• display: block: http://jsfiddle.net/23LcK/1/
• vertical-align with top or bottom: http://jsfiddle.net/23LcK/2/

Answer 6

li img {
    vertical-align: bottom;
}