table 垂直比水平大 space

Question

我似乎无法弄清楚为什么我的垂直间距似乎大于水平间距。我需要应用隐藏的 CSS 样式吗？

这里是示例代码（下图，或者直接link:https://www.w3schools.com/code/tryit.asp?filename=FGK16ROO32ZA）。您可以看到左右单元格之间的 space 较窄，但单元格顶部和底部之间的 space 较大：

body {
  margin: 0px;
}

table,
th,
tr,
td {
  border: 0px;
  border-spacing: 0px;
  border-padding: 0px;
}

img {
  width: 128px;
  height: 128px;
}

<table>
  <tr>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
</table>

Answer 1

将此添加到 table、th、tr、td{} css:

 padding: 2.5px 5px;

根据需要调整数字

https://www.w3schools.com/code/tryit.asp?filename=FGK1A71MO7PN

Answer 2

您的图片下方有一个小间隙（space 留给 descenders）。通过将它们的显示属性设置为阻止或浮动它们来删除它：

body {
  margin: 0px;
}

table,
th,
tr,
td {
  border: 0px;
  border-spacing: 0px;
}

img {
  width: 128px;
  height: 128px;
  display:block;
}

<table>
  <tr>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
</table>

正如我在对您的问题的评论中指出的那样，没有边框填充属性因此您可以将其删除。

Answer 3

您可以添加内边距：0 2px 0 2px；使其均匀。

body {
  margin: 0px;
}

table,
th,
tr,
td {
  border: 0px;
  border-spacing: 0px;
  padding: 0 2px 0 2px;
}
img {
  width: 128px;
  height: 128px;
}

<table>
  <tr>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
    <th><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></th>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
  <tr>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
    <td><img src="https://www.elie.net/image/public/1495321502/learn-web-security-with-google.png"></td>
  </tr>
</table>

Answer 4

html table 行和列是灵活的，除非您定义了高度和宽度值。如我所见，您给出的图像宽度和高度与原始图像的高度和宽度不成比例。我建议按照以下方式设置图像高度或宽度的样式。

img{
width: 128px;
/*height must be proportional to width otherwise image get stretch*/
}

希望对您有所帮助。

table 垂直比水平大 space

table bigger space vertically than horizontally

html

css

html-table

spacing