CSS line-height ιδιότητα

Δημιουργία και χρήση

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

Σημείωση:Δεν επιτρέπεται η χρήση αρνητικών τιμών.

Περιγραφή

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

Η διαφορά μεταξύ της υπολογισμένης τιμής της line-height και της font-size (στη CSS ονομάζεται "διαδρομή γραμμής") μοιράζεται σε δύο μέρη και προστίθεται στη κορυφή και στο κάτω μέρος μιας γραμμής κειμένου. Ο μικρότερος κουτί που περιέχει αυτά τα περιεχόμενα είναι ο τοίχος γραμμής.

Η αρχική αριθμητική τιμή καθορίζει έναν συντελεστή κλιμάκωσης, και τα απογόνων στοιχεία θα κληρονομήσουν αυτόν τον συντελεστή κλιμάκωσης αντί για την υπολογισμένη τιμή.

Για περισσότερες πληροφορίες:

Εκμάθηση CSS:CSS Γραμματοσειρά

Εγχειρίδιο HTML DOM:Ιδιότητα lineHeight

Παράδειγμα

Ρύθμιση της απόστασης μεταξύ των γραμμών με ποσοστό:

p.small {line-height:90%}
p.big {line-height:200%}

Προσπαθήστε μόνοι σας

Μπορείτε να δείτε περισσότερα παραδείγματα στο κάτω μέρος της σελίδας.

Γλώσσα γραμματογραφίας CSS

line-height: normal|number|length|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
κανονική Προεπιλεγμένο. Ρύθμιση λογικής απόστασης μεταξύ των γραμμών.
number Ρύθμιση αριθμού, ο οποίος θα πολλαπλασιαστεί με το τρέχον μέγεθος γραμματοσειράς για να ρυθμίσει την απόσταση μεταξύ των γραμμών.
length Ρύθμιση σταθερής απόστασης μεταξύ των γραμμών.
% Ποσοστό απόσταση μεταξύ των γραμμών βασισμένο στη τρέχουσα μέγεθος γραμματοσειράς.
inherit Καθορίζει ότι η τιμή της ιδιότητας line-height θα πρέπει να 继承 από το γονικό στοιχείο.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: κανονική
Επιδίωξη: ναι
Έκδοση: CSS1
Γλώσσα γραμματογραφίας JavaScript: объект.style.lineHeight="2"

Παράδειγμα TIY

Ρύθμιση της απόστασης μεταξύ των γραμμών με ποσοστό
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε ποσοστό για να ρυθμίσετε την απόσταση μεταξύ των γραμμών ενός κειμένου.
Ρύθμιση της απόστασης μεταξύ των γραμμών με τιμές pixel
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε τιμές σε pixel για να ρυθμίσετε την απόσταση μεταξύ των γραμμών ενός κειμένου.
Ρύθμιση της απόστασης μεταξύ των γραμμών με αριθμό
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε έναν αριθμό για να ρυθμίσετε την απόσταση μεταξύ των γραμμών ενός κειμένου.

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμητικά στοιχεία στη τάβλη αναφέρουν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0