Η σημασία του 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 είναι ότι όταν αλλάζει το μέγεθος της γραμματοσειράς, αυτόματα αλλάζει και το διαστήματος μεταξύ των γραμμών.

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

html<p>
  some long text
</p>

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

Результат: