html - 如何减少文本之间的空间？

Question

我使用 Anki 程序，我想减少 'Meaning'、'Example'、'Meaning2' 和 'Example2' 之间的空间。

和我的代码：

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

score 1 · Accepted Answer

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

为避免这种情况，您需要使图像单元跨越两行。您可以通过添加rowspan="2"图像单元格来做到这一点，然后删除第二行的空单元格。

然后您还应该考虑将图像的高度设置为 300 像素，而不是图像单元。否则，您可能会得到不想要的结果。

在这里，我对您的代码进行了说明：

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

在这里，如果你使用rowspan：

现在图像单元已经与它下面的单元“合并”了，所以它基本上变成了一个单独的单元。它旁边的单元格不再继承高度，因此文本下方的空间消失了。

如果图像单元格的高度仍然为 300 像素，浏览器将尝试将两行中的所有内容都放入该高度。如果这是不可能的，那么表格将扩展以适应内容。因此，如果您首先将图像单元格的高度设置为 300 像素，以便图像适合该高度，那么我会将图像本身设置为该高度。

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

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

1 回答 1