我的 html 表中不需要的空间答案

【问题标题】：Unwanted space in my html table我的 html 表中不需要的空间
【发布时间】：2023-03-14 16:23:01
【问题描述】：

这是link，在我的表格中的图片底部可以看到我想离开的 5px 空间。

相关 HTML

<table border="1" bordercolor="#D88830" style="background-color:#555555;" cellspacing="0">
  <tr>
    <td>
      <img src="../../../images/team_members_dusty_arlia.jpg" alt="Dusty Arlia Picture" border="0" />
    </td>
    <td style="padding:25px; vertical-align:top;" width="550">
      <b>Name</b>: <i>Dusty Arlia</i><br />
      <b>Position</b>: <i>Owner</i><br />
      <b>Start Date</b>: <i>Founded on April 20, 2010</i><br />
      <b>Interests</b>: <i>Loves to snowboard in the winter, play volleyball in the summer, and gives lessons on foosball year round.</i>
    </td>
  </tr>

【问题讨论】：

Linux 上的 FF 3.6.13 中不会出现额外的空白。但是它在 Chrome 中确实如此。

标签： html image html-table

【解决方案1】：

你可以放 style="margin-bottom: -5px" 在每个图像上，最好声明一个具有此属性的类并在图像上使用它。

例如

<img src="../../../images/team_members_jacquelyn_buffo.jpg" alt="Jacquelyn Buffo Picture" border="0" style="margin-bottom: -5px">

【讨论】：

你的两个答案都是正确的，但我有点好奇那个 5px 是怎么来的。我觉得我没有解决问题的根源。

【解决方案2】：

试试这个

<img src="../../../images/team_members_dusty_arlia.jpg"  alt="Dusty Arlia Picture" border="0" style="margin-bottom:-5px" />

【讨论】：

你的两个答案都是正确的，但我有点好奇那个 5px 是怎么来的。我觉得我没有解决问题的根源。

【解决方案3】：

我看到你添加了 margin-bottom:-5px - 只是想抛出一个替代解决方案：

<img style="float:left;" ... />

这也解决了问题，可能是一个更好的整体解决方案，而不是使用负边距。

【讨论】：

【解决方案4】：

我在编写 HTML 电子邮件时经常遇到这个问题，因为您必须使用表格。

在图片上放一个vertical-align:bottom;的样式。

this page 给出的原因是图像是内联元素，因此为字体减速器保留了空间……这对我来说是有意义的。

【讨论】：

就是这样。我浪费了几个小时，你给了我答案。感谢您过去 3 年。

【解决方案5】：

我知道这个问题到现在已经有好几年了，但是我在遇到同样的问题时偶然发现了它。

你需要做的就是在有问题的图片上设置display: block;，无论是在CSS还是内联。

希望这对找到此答案的其他人有所帮助！

【讨论】：