Question

我使用Anki程序，我希望减少'含义'，'示例'，'含义2'和'示例2'之间的空格。

和我的代码：

.card {  
font-family: Arial;  
font-size: 20px;  
text-align: center;  
color: black;  
background-color: white;  
}

Answer 1

行之间的额外空间是因为您在包含图像的单元格中定义了300px的高度。由于它是一个表格，因此下一个单元格将继承300px的高度。

为避免这种情况，您需要使图像单元跨越两行。您可以通过向图像单元格添加rowspan="2"来执行此操作，并删除第二行上的空单元格。

然后你还应该考虑使图像高度为300px而不是图像单元格。否则你最终会得到不想要的结果。

我在这里举例说明了您的代码：

如您所见，当图像单元格的高度为300px时它旁边也会有它，因为同一行中的单元格不能有多个高度。这就是为什么在这之下有太多空间的原因第二个单元格中的文字。

在这里，如果你使用rowspan：

现在，图像单元已经＆＃34;合并了＃34;它下面的细胞，所以它基本上变成一个单细胞。它旁边的单元格不再存在继承高度，文本下方的空间消失。

如果图像单元格的高度仍为300像素，浏览器将尝试在该高度中拟合两行中的所有内容。如果不可能，则表格将展开以适合内容。因此，如果您首先将图像单元格设置为300px高度，以便图像可以适合该高度，我会将图像本身设置为高度。

如果您希望文本和图像在顶部对齐，则可以在所有单元格上使用valign="top"。

我仍然建议您在单独的CSS文件中执行所有样式而不是内联。