Align Images without spacing horizontally and veritcally

Question

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: ```

``` 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.

Accepted Answer

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;
}
```

Align Images without spacing horizontally and veritcally

Solution

Problem