Ύψος γραμμής - CSS-Κόλπα

Η line-heightιδιότητα καθορίζει το μέγεθος του χώρου πάνω και κάτω από τα ενσωματωμένα στοιχεία. Δηλαδή, στοιχεία που έχουν οριστεί σε display: inlineή display: inline-block. Αυτή η ιδιότητα χρησιμοποιείται πιο συχνά για να ορίσετε το αρχικό για γραμμές κειμένου.

p ( line-height: 1.5; )

Η line-heightιδιότητα μπορεί να αποδεχτεί τις τιμές λέξεων-κλειδιών normalή noneεπίσης έναν αριθμό, μήκος ή ποσοστό.

Σύμφωνα με τις προδιαγραφές, μια τιμή «κανονικής» δεν είναι μόνο μια συγκεκριμένη τιμή που εφαρμόζεται σε όλα τα στοιχεία, αλλά μάλλον υπολογίζει σε μια «λογική» τιμή ανάλογα με το μέγεθος γραμματοσειράς που έχει οριστεί (ή κληρονομείται) στο στοιχείο.

Μια τιμή μήκους μπορεί να οριστεί χρησιμοποιώντας οποιαδήποτε έγκυρη μονάδα CSS (px, em, rem, κλπ).

Μια τιμή ποσοστού είναι το μέγεθος γραμματοσειράς του στοιχείου πολλαπλασιασμένο επί το ποσοστό. Για παράδειγμα:

Δείτε αυτό το στυλό!

Στην παραπάνω επίδειξη, οι τρεις παράγραφοι έχουν τα ύψη γραμμής τους σε 150%, 200% και 250%, αντίστοιχα. Το στοιχείο του αμαξώματος έχει το μέγεθος γραμματοσειράς που ορίζεται στα 20px. Αυτό σημαίνει ότι τα υπολογισμένα ύψη γραμμής για τις παραγράφους είναι 30px, 40px και 50px, αντίστοιχα.

Ύψος γραμμής χωρίς μονάδα

Η συνιστώμενη μέθοδος για τον καθορισμό του ύψους γραμμής είναι η χρήση μιας αριθμητικής τιμής, που αναφέρεται ως "χωρίς μονάδα" ύψος γραμμής. Μια τιμή αριθμού μπορεί να είναι οποιοσδήποτε αριθμός, συμπεριλαμβανομένου ενός δεκαδικού αριθμού, όπως χρησιμοποιείται στο πρώτο παράδειγμα κώδικα σε αυτήν τη σελίδα.

Συνιστώνται ύψος γραμμής χωρίς μονάδα, επειδή τα θυγατρικά στοιχεία θα κληρονομήσουν την τιμή του ακατέργαστου αριθμού και όχι την υπολογισμένη τιμή. Με αυτό, τα θυγατρικά στοιχεία μπορούν να υπολογίσουν τα ύψη γραμμής τους με βάση το υπολογισμένο μέγεθος γραμματοσειράς, αντί να κληρονομήσουν μια αυθαίρετη τιμή από έναν γονέα που είναι πιο πιθανό να χρειαστεί αντικατάσταση.