Question

＆＃13;

<html>
<body style="background:grey;">
  <table width="500" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
    height: 9px;
"></td>
    </tr>
    <tr>
      <td style="
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
    height: 9px;
"></td>
    </tr><tr>
      <td><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
    </tr>
  </tbody>
</table>
</body></html>

＆＃13;

我不明白为什么第三张拉链图像的高度为18.基本上，当我将图像添加为背景时，每行之间没有间隙（第1行和第2行之间没有间隙）。但是，当我使用图像标记时，它会在第2行和第3行之间产生间隙。我不明白为什么。有任何想法吗？而且我如何删除第2行和那里之间的差距。

Answer 1

默认情况下，

<img>被认为是内联的，因此与其他内联元素一样，它具有下划线的行高和空间。下降空间是每条线下面的小填充，在任何地方都没有占用，因为悬挂的字母就像在＆＃39; p＆＃39;或者＆＃39; q＆＃39;。

如果您将其设置为display: block，则所有内容都会同时点击。

Answer 2

通过CSS添加的任何内容都不被浏览器视为“内容”。

您看到前两行的唯一原因是height:9px; CSS。如果删除它，您将看到行没有出现（0高度），这是因为行不包含任何内容，因此它们依赖CSS来指定它们的尺寸。

由于最后一个<td>包含<img ...标记中的内容，因此它将显示带有标准表格间距的图像，因为它尚未被任何css覆盖。

Answer 3

默认情况下，<td>代码会将display:table-cell;作为样式继承。要解决此问题，只需将其覆盖为flex。

<html>
<body style="background:grey;">
  <table width="500" border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
    height: 9px;
"></td>
    </tr>
    <tr>
      <td style="
    background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
    height: 9px;
"></td>
    </tr><tr>
      <td style="display:flex;"><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
    </tr>
  </tbody>
</table>
</body></html>

为什么td会在表格中添加额外的填充？

3 个答案: