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
  • 16,911
  • 15
  • 76
  • 112

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
  • 219,308
  • 53
  • 366
  • 287
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
  • 69,448
  • 7
  • 95
  • 188