图像并不完全适合其容器

Question

我正在尝试将图像放在容器中但由于某种原因，图像末尾总会有一个小的额外空间：这是一个小小的测试：http://codepen.io/anon/pen/sikAm。如果您查看右侧栏中的最后一个，则没有白色，因为容器隐藏了溢出。这让我觉得问题是因为图像而发生，而不是因为容器。因此，容器的大小变为白色，因为图像会“推动”内部的额外空间。但是，图像的大小是正确的，没有可以在底部添加的边距，所以我可能完全走错了轨道：

img {
  border: 0;
  width: auto;
  max-width: 100%;
  height: auto;
}

我不知道该怎么做。什么可以导致那个空白？我错过了什么？

Answer 1

问题在于，默认情况下，图像是内联元素，其vertical-align属性默认为baseline。这种对齐会在元素下方产生一些空间。

要修复它，您可以使用

• display: block [Demo]。这样，元素将不再是内联级别，因此vertical-align不会适用。

• vertical-align: middle [Demo]。这解决了对齐问题。其他值也可能有效。

Answer 2

默认情况下，{p> img会显示inline，这会自动为下一行文本创建空格。

而是将display设置为block。它会让那些空间消失。

img {
    display:block
}