摆脱 IMG 行之间的空格

Question

如何去除正方形之间的水平和垂直空间？

<div class="first">
  <ul>
    <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li>
    <li><img src="http://dummyimage.com/40x40/222222/000000.jpg"/></li>
    <li><img src="http://dummyimage.com/40x40/333333/000000.jpg"/></li>
    <li><img src="http://dummyimage.com/40x40/444444/000000.jpg"/></li>
  </ul>
</div>  
<div class="first">
  <ul>
    <li><img src="http://dummyimage.com/40x40/555555/000000.jpg"/></li>
    <li><img src="http://dummyimage.com/40x40/666666/000000.jpg"/></li>
    <li><img src="http://dummyimage.com/40x40/777777/000000.jpg"/></li>
    <li><img src="http://dummyimage.com/40x40/888888/000000.jpg"/></li>
  </ul>
</div> 

https://jsfiddle.net/ruyer/x61h9s4a/

Answer 1

当你为孩子display:inline-block;时，为父母font-size:0;。

.first ul{
  font-size: 0;
}

小提琴：https://jsfiddle.net/nikhilvkd/x61h9s4a/2/