td的高度与内容不匹配

Question

在此表中，我有一张包含3张图片的表格：left，topcenter和right。 topcenter td行为126px，但内容图像为122px。 我尝试使用overflow：hidden，给td一个css固定的高度，但这个东西只想拥有126px的高度。

您可以通过topcenter图片下的box-shadow进行验证。 它应该粘在图像上，而不是4px以下。

我被困在这里，我猜其他人会在10秒内看到这个，所以请帮助我。

http://jsbin.com/fonemeqohe/1/edit?html,output

Answer 1

将display: block;或vertical-align设置为topcenter image：

img {vertical-align: bottom}

OR

img {display: block;}

Answer 2

尝试将line-height的{​​{1}}设置为0。

Answer 3

1. 每行需要相同数量的单元格
2. 您的第二个（顶部中心）单元格宽度为100％，这是荒谬的
3. 一行中的所有单元格具有相同的高度，这是表格的概念

我的两分钱 - 停止使用表格进行布局和外观，它们仅用于数据。例如，使用内联块div，或者使用float：left作为div。或者只是将图像放在一起，无论你需要什么。

编辑：或者将这些图像组合在一起并将其用作身体的背景图像（或任何其他适合您需要的元素）。