Ρυθμίσεις σε CSS: απόσταση μεταξύ γραμμών

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

Αν δεν κάνετε τίποτα, οι προκαθορισμένες τιμές έχουν οριστεί. Εάν θέλετε, μπορείτε να αλλάξετε αυτήν την απόσταση. Η τιμή μπορεί να είναι είτε σε ποσοστό είτε σε εικονοστοιχεία.

Ύψος σειρών

Στο CSS, η απόσταση μεταξύ των γραμμών μπορεί να αποδειχθεί από το ακόλουθο σχήμα.

Η παραπάνω εικόνα δείχνει τις παραμέτρους με τις αντίστοιχες αποστάσεις. Το κείμενο βρίσκεται στο χώρο μεγέθους γραμματοσειράς. Σημειώστε ότι η γραμμή κειμένου δεν ξεκινά στο κάτω μέρος, αλλά είναι ελαφρώς υψηλότερη. Ο παρακάτω χώρος παρέχεται για γράμματα που έχουν στοιχεία από κάτω (g, y και ούτω καθεξής).

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

Το παραπάνω σχήμα δείχνει πού στο Photoshop μπορείτε να καθορίσετε την κορυφαία. Ένας αριθμός υποδεικνύει την παράμετρο μεγέθους γραμματοσειράς.

Παραδείγματα χρήσης ύψους γραμμής

Στο CSS, η απόσταση μεταξύ των γραμμών μπορεί να οριστεί ως ποσοστό. Ένα ενδεικτικό παράδειγμα δίνεται παρακάτω.

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

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

Λεπτότητα σχεδιασμού

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

Στο πεδίο "Στοιχείο", στην περίπτωσή μας θα υπάρχει κείμενο. Το Padding είναι μια εσοχή μέσα σε ένα αντικείμενο και το περιθώριο είναι μια εσοχή ενός αντικειμένου. Το όριο είναι ένα πλαίσιο. Μπορεί να είναι 0 εικονοστοιχεία, και ίσως 100.

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

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

Σε περιπτώσεις όπου υπάρχουν πολλές γραμμές και όλα αυτά βρίσκονται σε ένα αντικείμενο, η γραμματοσειρά συνιστάται να αλλάζει από τις κύριες παραμέτρους.

Πώς να αυξήσετε την απόσταση μεταξύ των γραμμών CSS

Η απόσταση μεταξύ των γραμμών HTML μπορεί να αντιστοιχιστεί σε μια κλάση ή σε όλες τις παραγράφους του κειμένου. Αν καθορίζετε αυτό: p {line-height: 20px; }, Τελικά όλες οι παράγραφοι στη σελίδα θα έχουν γραμμές 20 εικονοστοιχείων. Εάν χρειάζεστε διαφορετικά μεγέθη σε διαφορετικά μέρη, συνιστάται να κάνετε τα εξής.

Προσθέτοντας στυλ.

.class1 {γραμμή-ύψος: 20px; }}

.class2 {γραμμή-ύψος: 16px; }}

.class3 {γραμμή-ύψος: 12px; }}

Για λόγους σαφήνειας, θα προσθέσουμε ένα πλαίσιο ώστε να μπορείτε να δείτε ότι λειτουργεί. Στο μέλλον, πρέπει να αφαιρεθεί.

Στη συνέχεια, εφαρμόστε αυτές τις κατηγορίες. Το αποτέλεσμα είναι ως εξής.

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

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

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

Η μηχανή αναζήτησης "Google" διαθέτει ένα ειδικό εργαλείο που βοηθά στην ανάλυση αυτή. Είναι πολύ βολικό για webmasters.

Εδώ είναι ένα παράδειγμα των αποτελεσμάτων που μπορεί να είναι.

Συνιστάται να χρησιμοποιείτε τις υποδείξεις τους, καθώς αυτά τα κριτήρια επηρεάζουν το αποτέλεσμα αναζήτησης.