3

I have a group of 4 images that I'm trying to align vertically and horizontally.

The problem:

I cant get ride of a a small vertical spacing between them.

Please check out the issue reproduced in Fiddle

html:

<div>
    <ul>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
        <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>

        </li>
    </ul>
</div>

css:

* {margin:0; padding: 0;}
div {width: 200px; height: 200px;}
ul {
    list-style:none;
}
ul li {
    display: inline-block;
    float:left;
}

It seems pretty simple, but I haven't been able to get ride of spacing other than manually specify the height to 100px, which isn't responsive and so not viable.

Community
  • 1
  • 1
agconti
  • 17,780
  • 15
  • 80
  • 114

3 Answers3

4

Adding vertical-align:top on the img elements will remove the gap. The default is baseline.

As a side note, bottom and middle work too.

jsFiddle example

img {
    vertical-align:top;
}

Adding display:block to the img elements works too. (example)

img {
    display:block;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
0

Try margin: 0 auto; border: 0px;

Theo Anderson
  • 163
  • 1
  • 1
  • 5
0

If you don't have text in this you can just say 

ul {
    font-size: 0;
}

This eliminates the space, see modified JSFiddle

Olaf Dietsche
  • 72,253
  • 8
  • 102
  • 198