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

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.