html - 内联图像和堆叠

Question

我不确定这个持有人页面的代码有什么问题。有些东西破坏了格式，我确信它与内联块和清除框有关。

谁能引导我朝着正确的方向前进？我以前没有完全根据图像制作页面。

这条线表示渲染时它的高度为 127 像素 - 但是图像只有 121 像素。

<a class="imageleft" href="#"><img src="images/4.jpg" width="76" height="121"></a>

谁能看到我在这里错过了什么？

网站： http: //michaelbirchall.com/etc/dvd-page/

提前致谢。

Answer 1

问题是有一个继承的font-size. 它也会影响你的底行图像，但它并不明显，因为它下面没有任何其他图像。由于您的页面都是图像，因此将其设置为 0 应该没问题。

http://jsfiddle.net/2ZVVX/6/

CSS

* {
  margin: 0;
  padding: 0;
  font-size: 0;
}

Answer 2

.imageleft是一个inline-block元素，这意味着行高会影响它。只需设置line-height: 0即可：

http://jsfiddle.net/2ZVVX/5/