Τι πρέπει να γνωρίζετε
- Προσθέστε έναν κανόνα στο φύλλο στυλ CSS που ορίζει όλα τα περιθώρια και τις τιμές padding των στοιχείων HTML σε μηδέν.
Αυτό το άρθρο εξηγεί πώς να χρησιμοποιήσετε το CSS για να μηδενίσετε περιθώρια και περιγράμματα, ώστε οι ιστοσελίδες σας να αποδίδονται με συνέπεια σε κάθε πρόγραμμα περιήγησης.
Ομαλοποίηση των τιμών για τα περιθώρια και τα περιθώρια
Ο καλύτερος τρόπος για την επίλυση του προβλήματος ενός ασυνεπούς μοντέλου πλαισίου είναι να μηδενίσετε όλα τα περιθώρια και τις τιμές των στοιχείων HTML. Υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να το κάνετε αυτό είναι να προσθέσετε αυτόν τον κανόνα CSS στο φύλλο στυλ σας:
class = «ql-syntax»> Παρόλο που αυτός ο κανόνας δεν είναι συγκεκριμένος, επειδή βρίσκεται στο εξωτερικό φύλλο στυλ σας, θα έχει υψηλότερη ειδικότητα από τις προεπιλεγμένες τιμές του προγράμματος περιήγησης. Δεδομένου ότι αυτές οι προεπιλογές είναι αυτό που αντικαθιστάτε, αυτό το στυλ θα επιτύχει αυτό που σκοπεύετε να κάνετε. Μόλις απενεργοποιήσετε όλα τα περιθώρια και να γεμίσετε, θα πρέπει να τα ενεργοποιήσετε επιλεκτικά για συγκεκριμένα τμήματα της ιστοσελίδας σας για να επιτύχετε την εμφάνιση και την αίσθηση που απαιτεί ο σχεδιασμός σας.
Χρησιμοποιήστε το CSS για να ομαλοποιήσετε τα σύνορα
Οι παλαιότερες εκδόσεις του Internet Explorer είχαν ένα διαφανές ή αόρατο περίγραμμα γύρω από στοιχεία. Εάν δεν ορίσετε το περίγραμμα σε 0, αυτό το περίγραμμα μπορεί να βλάψει τις διατάξεις της σελίδας σας. Εάν έχετε αποφασίσει ότι θα συνεχίσετε να υποστηρίζετε αυτές τις αρχαίες εκδόσεις του IE, θα πρέπει να το αντιμετωπίσετε προσθέτοντας τα ακόλουθα στο σώμα σας και στα στυλ HTML: HTML, body {
περιθώριο: 0px;
επένδυση: 0px;
περίγραμμα: 0px;
}
class = «ql-syntax»> Παρόμοιο με τον τρόπο απενεργοποίησης των περιθωρίων και της επένδυσης, αυτό το νέο στυλ θα απενεργοποιήσει επίσης τα προεπιλεγμένα περιγράμματα. Θα μπορούσατε επίσης να κάνετε το ίδιο πράγμα χρησιμοποιώντας τον επιλογέα μπαλαντέρ που εμφανίζεται νωρίτερα στο άρθρο.
Γιατί τα συνεπή περιθώρια και τα σύνορα έχουν σημασία στο σχεδιασμό ιστοσελίδων
Το σημερινό πρόγραμμα περιήγησης στο Web έχει προχωρήσει πολύ από τις τρελές μέρες όπου κάθε είδους συνοχή μεταξύ προγραμμάτων περιήγησης ήταν ευσεβής τρόπος σκέψης. Τα σημερινά προγράμματα περιήγησης ιστού συμμορφώνονται πλήρως με τα πρότυπα. Παίζουν όμορφα μαζί και παρέχουν μια αρκετά συνεπή εμφάνιση σελίδας στα διάφορα προγράμματα περιήγησης. Αυτό περιλαμβάνει τις τελευταίες εκδόσεις του Google Chrome, του Microsoft Edge, του Mozilla Firefox, του Opera, του Safari και των διαφόρων προγραμμάτων περιήγησης που βρέθηκαν στις μυριάδες κινητές συσκευές που έχουν πρόσβαση σε ιστότοπους σήμερα. Παρόλο που έχει σημειωθεί πρόοδος στον τρόπο με τον οποίο τα προγράμματα περιήγησης εμφανίζουν CSS, εξακολουθούν να υπάρχουν ασυνέπειες μεταξύ αυτών των διαφόρων επιλογών λογισμικού. Μία από τις συνηθισμένες ασυνέπειες είναι ο τρόπος με τον οποίο αυτά τα προγράμματα περιήγησης υπολογίζουν τα περιθώρια, τα πλήκτρα και τα περιγράμματα από προεπιλογή. Επειδή αυτές οι πτυχές του μοντέλου κουτιού επηρεάζουν όλα τα στοιχεία HTML και επειδή είναι απαραίτητα για τη δημιουργία διατάξεων σελίδων, μια ασυνεπής εμφάνιση σημαίνει ότι μια σελίδα μπορεί να φαίνεται υπέροχη σε ένα πρόγραμμα περιήγησης, αλλά να φαίνεται ελαφρώς μακριά σε άλλη. Για την αντιμετώπιση αυτού του προβλήματος, πολλοί σχεδιαστές ιστοσελίδων ομαλοποιούν αυτές τις πτυχές του μοντέλου κουτιού. Αυτή η πρακτική είναι επίσης γνωστή ως μηδέν τις τιμές για περιθώρια, παραγέμισμα και περιγράμματα.
Μια σημείωση για τις προεπιλογές του προγράμματος περιήγησης
Τα προγράμματα περιήγησης στο Web ορίζουν προεπιλεγμένες ρυθμίσεις για ορισμένες πτυχές εμφάνισης μιας σελίδας. Για παράδειγμα, οι υπερσύνδεσμοι είναι μπλε και υπογραμμισμένοι από προεπιλογή. Αυτή η συμπεριφορά είναι συνεπής σε διάφορα προγράμματα περιήγησης και παρόλο που οι περισσότεροι σχεδιαστές αλλάζουν ανάλογα με τις ανάγκες σχεδιασμού του συγκεκριμένου έργου τους, το γεγονός ότι ξεκινούν όλοι με τις ίδιες προεπιλογές καθιστά ευκολότερη την πραγματοποίηση αυτών των αλλαγών. Δυστυχώς, η προεπιλεγμένη τιμή για περιθώρια, παραγέμισμα και περιγράμματα δεν απολαμβάνουν το ίδιο επίπεδο συνοχής μεταξύ προγραμμάτων περιήγησης.
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Πώς να χρησιμοποιήσετε το CSS για να μηδενίσετε τα περιθώρια και τα σύνορά σας.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/css-zero-out-margins-3464247.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Πώς να χρησιμοποιήσετε το CSS για να μηδενίσετε τα περιθώρια και τα σύνορά σας. Ανακτήθηκε από το https://www.thoughtco.com/css-zero-out-margins-3464247
Kyrnin, Jennifer. «Πώς να χρησιμοποιήσετε το CSS για να μηδενίσετε τα περιθώρια και τα σύνορά σας.» ThoughtCo. https://www.thoughtco.com/css-zero-out-margins-3464247 (πρόσβαση στις 24 Μαΐου 2021).
αντιγραφή παραπομπής