高度显示不正确

Question

我最后一次打击了一个非常愚蠢的问题。为什么我不能将两个盒子的细胞分开以正确显示在9px？我已经完成了几次数学运算，但是在单元格中，箭头指向它，它增加了额外的高度：

我实际上似乎是为它设置的9 px高度加倍（约18px）。为什么？？这毫无意义。

<!-- BIG WRAPPER TABLE FOR CENTRAL CONTENT -->
<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage">
  <tr align="center">
    <td>

      <table width="681" height="451" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td rowspan="3" bgcolor="#FF66CC">Image will go here</td>
          <td rowspan="3" width="9">&nbsp;</td>
          <td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
        </tr>
        <tr height="9">
          <td height="9" width="221" bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
        <tr>
          <td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
        </tr>
    </table>


    </td>
  </tr>
</table>
<!-- END BIG WRAPPER TABLE -->

Answer 1

这是因为你的td

 <td height="9" width="221" bgcolor="#FFFFFF">&nbsp;</td>

当使用正常的字体大小渲染时，它会占用 的高度，只需删除它就可以了。

以下是working fiddle

Answer 2

为什么不使用CellSpacing来完成你需要做的事情，而不是为你的间距创建TD：

<table width="700px" border="0" cellspacing="0" cellpadding="0" class="homepage" style="font-size: 7pt;">
  <tr align="center">
    <td>

      <table width="681" height="451" border="0" cellspacing="9" cellpadding="0" align="center">
        <tr>
          <td rowspan="2" bgcolor="#FF66CC">Image will go here</td>

          <td height="221" width="221" bgcolor="#3f7583">Text will go here</td>
        </tr>
        <tr>
          <td height="221" width="221" bgcolor="#CC0000">Image will go here</td>
        </tr>
    </table>

    </td>
  </tr>
</table>
<!-- END BIG WRAPPER TABLE -->