Why are my images not sticking 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 glued together? I check the items using the Chrome Inspector and it does not show me anything between the images, but they are spaced.

I can make them stick together by using negative margins, but in my opinion they should still stick together.

Answer 1

There is a place 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 working with spaces with sequential inline elements, such as images.

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