Διαστήματα Γραμμών στο CSS

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

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

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

Στο επόμενο παράδειγμα, η απόσταση μεταξύ των γραμμών κειμένου θα είναι 50px - 20px = 30px:

<p>
	some long text
</p>

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

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