【问题标题】：table bigger space vertically than horizontally桌子垂直比水平更大的空间
【发布时间】：2017-06-13 23:59:14
【问题描述】：
我似乎无法弄清楚为什么我的垂直间距似乎大于水平间距。我需要应用隐藏的 CSS 样式吗？
这是示例代码（以下或直接链接：https://www.w3schools.com/code/tryit.asp?filename=FGK16ROO32ZA）。您可以看到左右单元格之间的空间很窄，但单元格顶部和底部之间的空间更大：
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>
【问题讨论】：
标签：
html
css
html-table
spacing
【解决方案1】：
您的图像下方有一个小间隙（留给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>
正如我在对您的问题的评论中指出的那样，没有边框填充属性，因此您可以将其删除。
【解决方案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>
【解决方案4】：
html 表格的行和列是灵活的，除非您定义了高度和宽度值。正如我所看到的，您给出的图像宽度和高度与原始图像的高度和宽度不成比例。我建议采用以下方式来设置图像高度或宽度的样式。
img{
width: 128px;
/*height must be proportional to width otherwise image get stretch*/
}
希望对你有所帮助。