Wie kann ich den Abstand zwischen den Texten reduzieren?

Question

Ich benutze Anki-Programm und möchte den Abstand zwischen 'Bedeutung', 'Beispiel', 'Bedeutung2' und 'Beispiel2' reduzieren.

Image here shows what I mean

und mein Code:

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

Answer 1

Der zusätzliche Platz zwischen den Reihen, ist, weil Sie eine Höhe von 300px in der Zelle definiert haben, die das Bild enthält. Da es sich um eine Tabelle handelt, erbt die nächste Zelle die Höhe von 300px.

Um dies zu vermeiden, müssen Sie die Bildzelle so aufspannen, dass sie sich über zwei Zeilen erstreckt. Sie tun das, indem Sie rowspan="2" zu Ihrer Imagezelle hinzufügen und die leere Zelle in der zweiten Zeile entfernen.

Dann sollten Sie auch überlegen, das Bild 300px Höhe anstelle der Bildzelle zu machen. Sonst könnte es zu einem unerwünschten Ergebnis kommen.

---

Hier habe ich eine Darstellung des Codes gemacht:

Da kann man sich, wenn die Bild Zelle, hat eine Höhe von 300px die Zelle daneben, wird es auch haben, weil Zellen in der gleichen Reihe nicht mehrere Höhen haben können. Deshalb ist in der zweiten Zelle unter dem Text so viel Platz.

Und hier, wenn Sie rowspan verwenden:

Nun ist die Bildzelle haben „verschmolzen“ mit der Zelle darunter, so ist es im Grunde eine einzige Zelle wird. Die Zelle daneben, nicht mehr erbt die Höhe, so dass der Raum unter dem Text verschwindet.

Wenn Sie noch eine Höhe von 300px auf der Bildzelle haben, versucht der Browser den gesamten Inhalt aus den beiden Reihen zu passen, in dieser Höhe. Wenn dies nicht möglich ist, wird die Tabelle entsprechend dem Inhalt erweitert. Also, wenn Sie in erster Linie die Bildzelle 300px in der Höhe gemacht haben, damit das Bild diese Höhe passte, würde ich stattdessen das Bild selbst diese Höhe machen. Wenn Sie möchten, dass Text und Bilder oben ausgerichtet sind, können Sie valign="top" für alle Zellen verwenden.

Ich würde Ihnen immer noch empfehlen, den ganzen Stil in einer separaten CSS-Datei und nicht inline zu machen.

Working Fiddle