Χρησιμοποιήστε το CSS για να μηδενίσετε τα περιθώρια και τα σύνορά σας

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

Ομαλοποίηση των τιμών για τα περιθώρια και την επένδυση

Ο καλύτερος τρόπος για την επίλυση του προβλήματος ενός ασυνεπούς μοντέλου πλαισίου είναι να μηδενίσετε όλα τα περιθώρια και τις τιμές των στοιχείων HTML. Υπάρχουν μερικοί τρόποι με τους οποίους μπορείτε να το κάνετε αυτό είναι να προσθέσετε αυτόν τον κανόνα CSS στο φύλλο στυλ σας:

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

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

Χρησιμοποιήστε το CSS για να ομαλοποιήσετε τα σύνορα

Παλαιότερα εκδόσεις του Internet Explorer είχε ένα διαφανές ή αόρατο περίγραμμα γύρω από στοιχεία. Εάν δεν ορίσετε το περίγραμμα σε 0, αυτό το περίγραμμα μπορεί να βλάψει τις διατάξεις της σελίδας σας. Εάν έχετε αποφασίσει ότι θα συνεχίσετε να υποστηρίζετε αυτές τις παλαιές εκδόσεις του IE, θα πρέπει να το αντιμετωπίσετε προσθέτοντας τα ακόλουθα στο σώμα σας και στα στυλ HTML:

HTML, σώμα {
περιθώριο: 0px;
επένδυση: 0px;
 περίγραμμα: 0px;
}

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

Γιατί τα συνεπή περιθώρια και τα σύνορα έχουν σημασία στο σχεδιασμό ιστοσελίδων

Το σημερινό πρόγραμμα περιήγησης στο Web έχει προχωρήσει πολύ από τις τρελές μέρες όπου κάθε είδους συνοχή μεταξύ προγραμμάτων περιήγησης ήταν ευσεβής τρόπος σκέψης. Τα σημερινά προγράμματα περιήγησης ιστού συμμορφώνονται πλήρως με τα πρότυπα. Παίζουν όμορφα μαζί και παρέχουν μια αρκετά συνεπή εμφάνιση σελίδας στα διάφορα προγράμματα περιήγησης. Αυτό περιλαμβάνει τις τελευταίες εκδόσεις του Google Chrome, του Microsoft Edge, του Mozilla Firefox, του Opera, του Safari και των διαφόρων προγραμμάτων περιήγησης που βρίσκονται στοτις μυριάδες κινητές συσκευές πρόσβαση σε ιστότοπους σήμερα.

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

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

Μια σημείωση για τις προεπιλογές του προγράμματος περιήγησης

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