0

I am trying to make a list with images but I get some weird white space below the pictures.

Here's a jsFiddle: http://jsfiddle.net/ssxgg32j/1/

CSS: ul { margin:60px; padding:0; list-style-type:none; } ul li { display:inline-block; margin:0; padding:0; box-shadow:0 0 15px 5px #000; } ul li img { margin:0; padding:0; }

HTML:

<ul>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
    <li>
        <img src="http://placehold.it/400x225&text=%7B+img+%7D" alt="img 1" />
    </li>
</ul>
Alpha Kitten
  • 23
  • 7

1 Answers1

1

Add display: block; to the img.

ul li img { margin:0; padding:0; display: block; }

http://jsfiddle.net/ssxgg32j/2/

imjared
  • 19,492
  • 4
  • 49
  • 72