默认情况下，图片底部是否有5px的边距/边框/填充？

Question

I've been trying to make 8 images sit tight together, with no gaps inbetween them. Usually a pretty easy task, but for some reason I can't work out what is happening here.

I've reduced the code down to the simplest it can possibly be, but I can't for the life of me work out why this example produces a 5px gap of background: red . Anyone?

Codepen: http://codepen.io/patrickwc/pen/phHKk

code (css):

html, body {
  margin: 0;
  padding:0;
  background: red;
}

img {
  margin: 0;
  padding: 0;
  border: 0;
}

code (html):

<img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Various_grains.jpg">

That's it! Why isn't the image flush to the bottom of the page? Please someone put me out of my misery.

Answer 1

Images are inline elements, so like text they have a kind of gutter at the bottom where lowercase letters like y,g etc would hang down.

Set the image to display:block and you lose the gap.