정렬되지 않은 목록의 img 아래의 이상한 공백

Question

이미지가있는 목록을 만들려고하는데 그림 아래에 이상한 공백이 생깁니다. http://jsfiddle.net/ssxgg32j/1/

CSS : 여기

가 jsFiddle의 UL {마진 : 60 픽셀; 패딩 : 0; list-style-type : 없음; } ul li {display : inline-block; 여백 : 0; 패딩 : 0; 상자 그림자 : 0 0 15px 5px # 000; } ul li img {margin : 0; 패딩 : 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> 

Answer 1

디스플레이를 추가 블록; img에.

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

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