1

how can I get rid of the space horizontally and vertically between squares?

<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/

Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Fecosos
  • 944
  • 7
  • 17

1 Answers1

2

Give font-size:0; for parent when you giving display:inline-block; for child. 

.first ul{
  font-size: 0;
}

Fiddle: https://jsfiddle.net/nikhilvkd/x61h9s4a/2/

Krish
  • 1,884
  • 2
  • 16
  • 40