我的html表中不需要的空间

Question

这是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>

Answer 1

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

放一种垂直对齐方式：底部;在图像上。

在this page上给出的原因是图像是内联元素，因此空间被保留用于字体下伸...有意义并且对我有用。

Answer 2

你可以在每个图像上放置style =“margin-bottom：-5px”，最好用这个属性声明一个类并在图像上使用它。

EG

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

Answer 3

试试这个

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

Answer 4

我看到你添加了保证金底部：-5px - 只是想抛出一个替代解决方案：

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

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

Answer 5

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

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

希望这可以帮助找到这个答案的任何人！