Χρησιμοποιώντας την ιδιότητα Ύψους Γραμμής CSS για να λάβετε CSS Line Spacing
Μάθετε πώς να χρησιμοποιείτε το ύψος της γραμμής ιδιοτήτων του στυλ CSS για να επηρεάσετε το διάστημα μεταξύ των γραμμών σας στις ιστοσελίδες σας.
Τιμές διαστήματος γραμμής CSS
Η απόσταση γραμμής CSS επηρεάζεται από το ύψος γραμμής ιδιοτήτων στυλ CSS. Αυτή η ιδιότητα απαιτεί έως και 5 διαφορετικές τιμές:
- κανονικό: το πρόγραμμα περιήγησης καθορίζει μια τιμή για την απόσταση γραμμών που σχετίζεται με το μέγεθος της γραμματοσειράς. Αυτό είναι συνήθως το ίδιο με το μέγεθος γραμματοσειράς ή ελαφρώς μεγαλύτερο (όπως το 20%).
- κληρονομούν: η απόσταση μεταξύ γραμμών πρέπει να λαμβάνεται από το κεντρικό διάστημα του γονικού στοιχείου. Επομένως, εάν ορίσετε το ύψος γραμμής της ετικέτας του σώματός σας σε 30% μεγαλύτερο από το μέγεθος της γραμματοσειράς και τις ετικέτες των παραγράφων που έχουν οριστεί να κληρονομήσουν, θα έχουν επίσης ένα ύψος γραμμής 30% μεγαλύτερο από το μέγεθος γραμματοσειράς.
- ένας αριθμός: Εάν η τιμή ύψους γραμμής δεν έχει μονάδα μέτρησης, θεωρείται ότι είναι ένας πολλαπλασιαστής στο μέγεθος γραμματοσειράς για το ύψος της γραμμής. Έτσι ένα ύψος γραμμής 1,25 θα ήταν 25% μεγαλύτερο από το μέγεθος της γραμματοσειράς.
- ένα μήκος: Εάν η τιμή ύψους γραμμής έχει μια μονάδα μέτρησης, δηλαδή το ακριβές ποσό χώρου θα πρέπει να υπάρχει μεταξύ των γραμμών. Έτσι, 1,25 χιλιοστά θα οδηγήσει σε γραμμές 1,25 χιλιοστά μεταξύ τους.
- ένα ποσοστό: Εάν το ύψος γραμμής είναι ένα ποσοστό, αυτό θα ήταν ένα ποσοστό του μεγέθους της γραμματοσειράς. Έτσι ένα ύψος γραμμής 125% θα ήταν 25% μεγαλύτερο από το μέγεθος της γραμματοσειράς.
Ποια αξία πρέπει να χρησιμοποιήσετε για τη διαχωρισμό γραμμών CSS
Στις περισσότερες περιπτώσεις, η καλύτερη επιλογή για απόσταση γραμμής είναι να την αφήσετε στην προεπιλογή - ή "κανονική". Αυτό είναι γενικά το πιο ευανάγνωστο και δεν απαιτεί να κάνετε κάτι ιδιαίτερο. Αλλά η αλλαγή της απόστασης γραμμής μπορεί να δώσει στο κείμενό σας διαφορετική αίσθηση.
Εάν το μέγεθος της γραμματοσειράς σας ορίζεται ως ems ή ποσοστά, το ύψος γραμμής σας θα πρέπει επίσης να οριστεί με αυτόν τον τρόπο. Αυτή είναι η πιο ευέλικτη μορφή γραμμής, διότι επιτρέπει στον αναγνώστη να αλλάζει το μέγεθος των γραμματοσειρών και διατηρεί την ίδια αναλογία στην απόσταση μεταξύ γραμμών.
Ορίστε το ύψος γραμμής για φύλλα στυλ εκτύπωσης με μια τιμή σημείου (pt). Το σημείο είναι ένα μέτρο εκτύπωσης, και έτσι τα μεγέθη γραμματοσειράς σας θα πρέπει να είναι σε σημεία επίσης.
Δεν μου αρέσει να χρησιμοποιώ την επιλογή αριθμού, επειδή έχω διαπιστώσει ότι είναι πιο σύγχυση στους ανθρώπους. Πολλοί άνθρωποι πιστεύουν ότι ο αριθμός είναι ένα απόλυτο μέγεθος, και έτσι το κάνουν τεράστιο. Για παράδειγμα, μπορεί να έχετε μια γραμματοσειρά ρυθμισμένη στα 14px και στη συνέχεια να ορίσετε το ύψος της γραμμής σας σε 14 - που έχει ως αποτέλεσμα τεράστιες διαφορές μεταξύ των γραμμών - επειδή η απόσταση γραμμών έχει οριστεί σε 14 φορές το μέγεθος της γραμματοσειράς.
Πόσο χώρος πρέπει να χρησιμοποιήσετε για την απόσταση γραμμών σας
Όπως ανέφερα παραπάνω, σας συνιστώ να χρησιμοποιήσετε την προεπιλεγμένη απόσταση μεταξύ γραμμών, εκτός εάν έχετε συγκεκριμένο λόγο για να την αλλάξετε. Η αλλαγή της απόστασης γραμμής μπορεί να έχει διαφορετικά αποτελέσματα:
- Το κείμενο που είναι πολύ σφιχτό μαζί μπορεί να είναι δύσκολο να διαβάσει. Αλλά οι μικρές διαστάσεις γραμμής μπορούν να επηρεάσουν τη διάθεση του κειμένου. Εάν το κείμενο σπρωχτεί μαζί, μπορεί να καταστήσει την αίσθηση του κειμένου πιο σκοτεινή ή πιο τεταμένη.
- Το κείμενο που είναι πιο μακριά μπορεί επίσης να είναι δύσκολο να διαβαστεί. Όμως, οι μεγάλες γραμμές γραμμών καθιστούν το κείμενο πιο ρευστό και ρευστό.
- Η αλλαγή της απόστασης γραμμής μπορεί να κάνει κείμενο που διαφορετικά δεν θα χωρέσει σε ένα χώρο να είναι πιο συμπαγές ή να καταλαμβάνει περισσότερο χώρο στα σχέδιά σας.