Η σημασία του line-height χωρίς μονάδες στο CSS

Η τιμή της ιδιότητας line-height δεν χρειάζεται απαραίτητα να είναι ένας αριθμός με μονάδες. Μπορείτε επίσης απλά να γράψετε έναν αριθμό ή ένα κλάσμα. Σε αυτήν την περίπτωση, η πραγματική τιμή του line-height μπορεί να βρεθεί πολλαπλασιάζοντας την με την τιμή του font-size.

Για παράδειγμα, το font-size είναι 10px, και το line-height είναι 1.5. Σε αυτήν την περίπτωση, η πραγματική τιμή του line-height θα είναι 10px * 1.5 = 15px. Λοιπόν, και το ορατό λευκό κενό μεταξύ των γραμμών κειμένου θα είναι 5px: 15px - 10px = 5px.

Το πλεονέκτημα αυτού του τρόπου ορισμού του line-height είναι ότι όταν αλλάζει το μέγεθος της γραμματοσειράς, αυτόματα αλλάζει και το διαστήματος μεταξύ των γραμμών.

Ας δούμε την εφαρμογή του παραπάνω σε ένα παράδειγμα:

<p>
	some long text
</p>

p {
	font-size: 20px;
	line-height: 1.5;
	text-align: justify;
	width: 400px;
}

Αφήστε το μέγεθος γραμματοσειράς για τις παραγράφους να είναι 30px. Ορίστε την ιδιότητα line-height έτσι, ώστε το ορατό λευκό κενό μεταξύ των παραγράφων να είναι 15px. Χρησιμοποιήστε για αυτό την τιμή line-height χωρίς μονάδες.