html - 如何确保 <td> 的高度恰好是 200px？

Question

我有一张 table ，里面有一张图片:

<table style="border: 3px solid rgb(0, 0, 0); width: 800px; background-color: rgb(255, 255, 255); margin-left: auto; margin-right: auto; border-collapse: collapse;">
 <tbody>
  <tr>
   <td style="text-align: center; padding: 0px; margin: 0px;"><img style="width: 800px; height: 200px; border: 0px;" alt="Logo" src="logo.png">
   </td>
  </tr>
 </tbody>
</table>

无论我做什么，图像底部仍然有一点白色。使用 Chrome 的 Inspector 进行快速检查后发现 td 的高度为 204px!

如何强制 td 与图像高度相同？

正如你在上面看到的，我尝试了各种各样的方法......

Answer 1

解决方案:添加“vertical-align:bottom;”图像风格。
另一种解决方案(并不总是合适)是将图像 display 类型更改为 block，而不是原来的 inline 显示类型。
解释:出现此问题的原因是浏览器会自动为比平常更长的字符在文本下添加空格。图像是像文本一样的内联对象，因此它下面也有一个空格。
一个很好的解释is written in quirksmode.org :

Complication: almost strict mode

In the early days, experiments with strict mode invariably raised the comment that images suddenly got an odd bottom margin that couldn’t be removed. The cause was that in strict mode is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still had to be reserved.

The solution was to explicitly declare images block level elements: img {display: block}.

Nonetheless browser vendors, Mozilla especially, thought this was such a confusing situation that they introduced "almost strict mode". This was defined as strict mode, but with images continuing to be blocks, and not inline elements.

Most common doctypes, including the one I use, trigger almost strict mode. The treatment of images is by far the most important difference between almost strict mode and really strict mode.

通常您应该使用 CSS 重置文档来避免此类问题。