div中意外的填充/边距

Question

我将所有div和margin s设置为padding时有图像。我仍然在div内的图像下方留下一点间隙。为什么div大于图像？

请参阅此jsfiddle：http://jsfiddle.net/n6bz4tye/

在FF32和Chrome 37中效果相同。

我知道，我可以使用负边距/填充来解决这个问题，但我想知道，发生了什么以及它为什么会这样。

Answer 1

要明确这一点：取字母A B C D.所有笔直，没有任何东西越过底部，顶部没什么。现在，如果你拿字母g y j等，你的底部有一些间距。

按标准，所有图像都呈现为“vertical-align：baseline”。这就是为什么底部有这个小房间的原因。图像位于正常字母的位置。符合A B C D.

把你的小提琴和div里面的“图像”添加到最后一个img“A和g”之后。你会看到g会填满底部的所有空间。

Answer 2

默认情况下，图像是一个内联元素，就像一个字母，在字母下方有一个空格，你在字母上找到的下行符，内联元素的默认垂直对齐方式（在你的情况下是图像）是基线而你可以调整图像的垂直对齐以将其定位在其他位置。

您可以通过将vertical-align: middle;设置为.images img

来删除以下空格

JSFiddle - DEMO

.images img {
  width: 100px;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}

您还可以通过将vertical-align设置为img

来全局重置此行为

img {
    vertical-align: middle;
}