html - 默认情况下图像底部的边距/边框/填充为 5px？

Question

我一直在努力让 8 张图片紧密地放在一起，中间没有间隙。通常这是一项非常简单的任务，但出于某种原因，我无法弄清楚这里发生了什么。

我已将代码缩减到最简单的程度，但我终究无法弄清楚为什么此示例会产生 5px 的 background: red 间隙。有人吗？

代码笔:http://codepen.io/patrickwc/pen/phHKk

代码(CSS):

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

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

代码(html):

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

就是这样!为什么图像没有齐平到页面底部？请有人把我从痛苦中解救出来。

Answer 1

图像是行内元素，所以像文本一样，它们在底部有一种排水沟，小写字母如 y、g 等会垂下来。

将图像设置为 display:block 并且您将失去间隙。