Why are my images not stuck together?

Question

I have this simple HTML / CSS

<div class="image-group">
  <img src="http://placehold.it/80x80" />
  <img src="http://placehold.it/120x120" />
  <img src="http://placehold.it/80x80" />
</div>

.image-group img {
  margin: 0;
  padding: 0;
}

JSFiddle

Why are the images not stuck together? I inspect the elements using Chrome's Inspector and it shows me nothing in between the images, yet they are spaced out.

I can get them to stick together by applying negative margins, but according to me, they should be sticking together anyways.

Answer 1

There's space in your html code. Try below

<div class="image-group">
    <img src="http://placehold.it/80x80" /><img src="http://placehold.it/120x120" /><img src="http://placehold.it/80x80" />
</div>

Answer 2

Check out this blog post about dealing with spaces with consecutive inline-block elements such as images.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/