How to remove the gap between each list-item in an unordered list?


Tags: html,css,html-lists

Problem :

Whenever I create a Unordered List, A gap remains below each of the list items.

What can I do to remove this?

Already tried margin : 0 and padding : 0 on both ul and li. The CSS reset of

*{ margin : 0; padding: 0 }

also doesn't seem to work.

The gap can be usually removed in case of a horizontal list. But I'm at a loss how to accomplish this when I want a vertical list.



Solution :

@j08691 @developdaly : I've placed images within each of the <li>. Could that be the problem ? – maxxon15 6 mins ago

Yes. Yes, it could.

Add this CSS to remove the gaps:

img {
    vertical-align: top;
}

The gaps aren't below each li, they're below each img.


    CSS Howto..

    CSS - How to align drop-down sub menu to the parent's right?

    css: How to horizontal align fonts with different sizes

    How to prevent this css shape to scroll left and right

    How to load Angular.js form to jsFiddle?

    How to position a vertical menu as nested
      under horizontal parent

    How to prevent css borders from floating to the top of parent div

    How to reference image locations in css asset hosted on a different domain?

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    how to apply jquery ui/css to forum field

    How can i apply more than 1 style to a single node at the same time programmatically

    How to make div position fixed without floating

    How to locate Element via CSS Selector/XPath?

    how to position a css sprite as background for another class

    How set font-size in TinyMce

    How to not inherit width in css?

    How to force floating blocks staying in the same row in css?

    BackboneJS + HandlebarsJS - how to add image based on css

    HTML/CSS How to make menu slide up when menu item is clicked?

    How to write different HTML for different screen sizes

    How to change background while changing visiblity?

    Hovering over item in WordPress list of pages shows Featured Image

    How can I use CSS to show and hide multiple elements at once?

    Can't show Combobox in table

    How to override a *{list style:none} property

    How to correctly use text overflow in bootstrap

    colspan doesn't accept decimal numbers. How do I specify the span?

    Showing/hiding elements inside a div block with HTML and CSS

    How to make all input boxes ordered in a straight line? [closed]

    How to not display css padding when span element is empty

    How to get rid of spacing between Bootstrap panels?