如何縮小文字之間的距離？

Question

我使用Anki程序，我想縮小'含義'，'示例'，'含義2'和'示例2'之間的空間。

Image here shows what I mean

和我的代碼：

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

Answer 1

行之間的額外空間，是因爲你已經包含圖像的細胞定義爲300px的高度。由於它是一個表，下一個單元格將繼承300px的高度。

爲了避免這種情況，您需要使圖像單元格跨越兩行。您可以通過將rowspan="2"添加到您的圖像單元中，然後刪除第二行上的空單元格來實現此目的。

然後你也應該考慮使圖像高度爲300px而不是圖像單元格。否則你可能會以不希望的結果結束。

---

這裏我使你的代碼的說明：

，你可以SE，當圖像細胞，具有細胞 旁邊的300像素的高度，也會有它，因爲在同一行中的單元格不能有 有多個高度。這就是爲什麼第二個單元格中的 文本下面有太多空間。

而在這裏，如果你使用rowspan：

現在像細胞具有「合併」與它下面的單元格，所以它基本上 成爲一個單細胞。它旁邊的單元格不再繼承高度，因此文本下方的空間消失。

如果圖像單元上的高度仍然爲300像素，瀏覽器會嘗試在這個高度上適合兩行中的所有內容。如果這是不可能的，表格將會擴展以適應內容。因此，如果您首先將圖像單元格的高度設置爲300像素以便圖像可以適合該高度，那麼我會將圖像本身設置爲高度。

如果您希望文本和圖像在頂部對齊，則可以在所有單元上使用valign="top"。

我仍然建議你在單獨的CSS文件中做所有的樣式，而不是內聯。

Working Fiddle