Ιδιότητα line-height

Η ιδιότητα line-height ορίζει το διάστημα μεταξύ των γραμμών του κειμένου (διαστήματα μεταξύ γραμμών).

Η ιδιότητα δεν ορίζει το κενό μεταξύ των γραμμών του κειμένου, όπως θα μπορούσε να φαίνεται, αλλά ορίζει το ύψος της γραμμής κειμένου. Αυτό σημαίνει ότι το πραγματικό κενό μεταξύ των γραμμών θα υπολογίζεται ως: line-height - font-size = απόσταση μεταξύ γραμμών κειμένου. Ή αντίστροφα line-height = font-size + απόσταση μεταξύ γραμμών κειμένου.

Σύνταξη

επιλογέας {
	line-height: τιμή;
}

Τιμές

Ως τιμές της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες για μεγέθη. Κατά τον ορισμό τιμής σε % το διάστημα μεταξύ γραμμών θα είναι σε ποσοστό του μεγέθους της γραμματοσειράς.

Επιπλέον, μπορεί να οριστεί ως τιμή οποιοσδήποτε αριθμός μεγαλύτερος του μηδενός. Σε αυτήν την περίπτωση γίνεται αντιληπτός ως πολλαπλασιαστής του μεγέθους της γραμματοσειράς. Για παράδειγμα, αν το font-size έχει τιμή 20px, και το line-height - 1.5, τότε αυτό ισοδυναμεί με το να γράψουμε line-height: 30px (20px * 1.5 = 30px).

Από προεπιλογή η ιδιότητα έχει τιμή normal, σε αυτήν την περίπτωση το πρόγραμμα περιήγησης επιλέγει αυτόματα το διάστημα μεταξύ γραμμών.

Παράδειγμα

Σε αυτό το παράδειγμα η απόσταση μεταξύ των γραμμών του κειμένου θα είναι line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Παράδειγμα

Ας μειώσουμε το κενό σε 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Παράδειγμα

Σε αυτό το παράδειγμα η απόσταση μεταξύ των γραμμών του κειμένου θα είναι line-height - font-size = 18px - 18px = 0px - οι γραμμές σχεδόν θα ενωθούν (οι ουρές των γραμμάτων της επάνω γραμμής θα ακουμπούν τις ουρές των γραμμάτων της κάτω γραμμής):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Παράδειγμα

Σε αυτό το παράδειγμα η τιμή line-height - είναι πολλαπλασιαστής 1.5 του μεγέθους της γραμματοσειράς. Συνεπώς το line-height θα είναι ισοδύναμο με font-size * 1.5 = 18px * 1.5 = 27px. Και το πραγματικό κενό μεταξύ γραμμών θα είναι line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Παράδειγμα

Ας αυξήσουμε τον πολλαπλασιαστή:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Παράδειγμα

Αν το line-height γίνει μικρότερο από το font-size, τότε οι γραμμές θα επικαλύπτονται η μία την άλλη:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}