Περιπλανώμενος στα φόρουμ συνάντησα το γεγονός ότι εξακολουθεί να τίθεται το ερώτημα, τι κάνει υλικό παραγεμίσματος, Και τι περιθώριο, και ποιες είναι οι διαφορές μεταξύ τους. Γι' αυτό αποφάσισα να σας το υπενθυμίσω. Οπότε, χωρίς να καταφύγουμε σε παράλογες φράσεις, ας θέσουμε το πρόβλημα και ας δούμε ένα παράδειγμα στο οποίο όλα θα γίνουν ξεκάθαρα.

Εργο: στη σελίδα Χρειάζομαι ένα κόκκινο μπλοκ(200x200 pixels), τα οποία απομακρύνεται από τις άκρες του προγράμματος περιήγησηςεπάνω και αριστερά κατά 40 και 70 pixel αντίστοιχα, και το κείμενο στο εσωτερικό του οποίου έχει εσοχή αριστερά και πάνωκατά 40 pixel.

Διάλυμα: κοιτάξτε την εικόνα και τον κωδικό. Το κόκκινο μπλοκ μας δεν πρέπει να υπερβαίνει τα 200 επί 200 pixel και θα πρέπει να έχει εσοχή από τις άκρες του προγράμματος περιήγησης (ή άλλων μπλοκ περιεχομένου). Στην πραγματικότητα, κάνουμε αυτές τις εσοχές μέσω περιθωρίου. Αν κάνουμε padding, τότε η εσοχή εμφανίζεται μέσα στο κόκκινο μπλοκ μας και η εσοχή προκύπτει με το φόντο του ίδιου του μπλοκ (δηλαδή κόκκινο).

Εκτός από τις ιδιότητες που χρησιμοποιούνται (γραμμές 6-9), υπάρχουν επίσης ιδιότητες margin-right, padding-right, margin-bottom, padding-bottom - είναι για εσοχή στα δεξιά και στο κάτω μέρος, αντίστοιχα. Οι τιμές για όλες αυτές τις ιδιότητες μπορεί να είναι σε pixel (px), ποσοστά (%) ή μονάδες em.

Κατ' αρχήν, αυτό είναι όλο. Ωστόσο, εξακολουθούν να υπάρχουν ορισμένα χαρακτηριστικά της εργασίας μαζί τους.

Χαρακτηριστικά περιθωρίου και επένδυσης

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

Εάν σε ένα μπλοκ δοθούν τιμές περιθώριο-αριστερά και περιθώρια-δεξιά του auto, τότε εάν το μπλοκ έχει σταθερό πλάτος (για παράδειγμα, 400 px) και δεν έχει ιδιότητα float CSS, τότε αυτό το μπλοκ θα ευθυγραμμιστεί στο κέντρο του στοιχείου στο οποίο βρίσκεται. Στην πραγματικότητα, για μη ελαστική διάταξη με κεντρική ευθυγράμμιση, αυτή η μέθοδος ευθυγράμμισης χρησιμοποιείται συνήθως. Παρά το γεγονός ότι ο IE 5.5 και προγενέστερες δεν υποστηρίζουν την αυτόματη τιμή, αυτό δεν σας εμποδίζει να το χρησιμοποιείτε συνεχώς =).

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

Και το τελευταίο που ήθελα να πω. Μην ξεχάσετε να χρησιμοποιήσετε δομές σύντομης γραφής, για παράδειγμα περιθώριο: 10px 0 5px 20px;. Εάν η εσοχή είναι μηδέν, τότε μπορείτε απλά να βάλετε ένα μηδέν, χωρίς να καθορίσετε τις παραμέτρους. Είναι πολύ εύκολο να θυμάστε ποια από τις παραμέτρους σχετίζεται με ποιο όριο - για ένα μπλοκ, οι εσοχές πηγαίνουν δεξιόστροφα: ο πρώτος αριθμός βρίσκεται στην κορυφή, ο δεύτερος δεξιά, ο τρίτος είναι κάτω, ο τέταρτος είναι στο αριστερά.

Στην πραγματικότητα αυτό ήθελα να σας πω σήμερα. Καλό Σαββατοκύριακο σε όλους!

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

Επένδυση και περιθώριο στο CSS

Η συνήθης μορφή σημειογραφίας για τις εν λόγω ιδιότητες είναι πιο κατανοητή επειδή είναι παρόμοια με όλες τις άλλες σημειώσεις στυλ:

Τακτική είσοδος:

padding-top: 10px;

padding-right: 20px; padding-bottom: 10px;«.

padding-αριστερά: 20px;

Από την άλλη πλευρά, η συντομογραφία CSS συνδυάζει όλες αυτές τις ιδιότητες σε μια κοινή ιδιότητα "

υλικό παραγεμίσματος Σύντομη καταχώρηση: padding: 10px 20px 40px 10px;

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

συμπλήρωση κάτω HTML

) και στα αριστερά:

γέμιση: ΠΑΝΩ ΔΕΞΙΑ ΚΑΤΩ ΑΡΙΣΤΕΡΑ. (επένδυση: πάνω δεξιά κάτω αριστερά)

Αυτή η καταχώριση μπορεί να μειωθεί σε τρεις τιμές εάν η αριστερή και η δεξιά επένδυση/περιθώριο είναι ίδια. Για παράδειγμα, εάν το επάνω περιθώριο είναι 30 εικονοστοιχεία, το αριστερό και το δεξί είναι 10 εικονοστοιχεία και το κάτω μέρος είναι 40 εικονοστοιχεία, τότε μπορείτε να χρησιμοποιήσετε τον ακόλουθο συμβολισμό:

padding: 30px 10px 40px;

Το μειώνουμε σε δύο τιμές!

Εάν η επάνω και η κάτω επένδυση/περιθώριο είναι ίδια και η δεξιά και η αριστερή επένδυση/περιθώριο είναι επίσης ίδια, τότε μπορούν να καθοριστούν μόνο δύο τιμές. Σε αυτό το παράδειγμα, έχουμε μια επάνω και κάτω επένδυση 10 εικονοστοιχείων και μια αριστερή και δεξιά επένδυση 20 εικονοστοιχείων. Το CSS μας θα μοιάζει με αυτό: γέμιση: ΠΑΝΩ/ΚΑΤΩ ΔΕΞΙΑ/ΑΡΙΣΤΕΡΑ. (επένδυση: επάνω/κάτω δεξιά/αριστερά) γέμιση: 10px 20px;Μόνο ένα νόημα!

Πότε να χρησιμοποιήσετε ποια μορφή εγγραφής; Για παράδειγμα, αν θέλω να δώσω σε ένα στοιχείο μόνο μια συμπλήρωση κάτω, θα χρησιμοποιήσω την κανονική σημείωση, καθώς χρειάζεται να εφαρμόσω την ιδιότητα μόνο στη μία πλευρά: padding-bottom: 30px ;

Πώς να εργαστείτε με το PADDING και το MARGIN

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

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

Μπορείτε επίσης να σκεφτείτε το padding ως το padding σε ένα κουτί από χαρτόνι. Όταν γεμίζετε ένα κουτί με αφρό, το χρησιμοποιείτε για να κρατάτε το περιεχόμενο μακριά από τις άκρες του κουτιού. Το padding στο CSS κάνει το ίδιο πράγμα.

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

PADDING και MARGIN στο παράδειγμα ενός ιστότοπου

Ας δούμε τις ιδιότητες χρησιμοποιώντας παραδείγματα με στοιχεία. Θα ξεκινήσουμε με μια παράγραφο (ετικέτα

), στη συνέχεια προσθέστε ένα χρώμα φόντου σε αυτό και προσθέστε padding 30 px σε κάθε πλευρά.

Παρακάτω στα αριστερά μπορείτε να δείτε ότι είναι μια παράγραφος με γέμιση 30 px γύρω της. Στην εικόνα στα δεξιά, χρησιμοποίησα τα εργαλεία του Google Chrome για να δείξω πού ξεκινά/ τελειώνει η αναπλήρωση HTML για αυτό το στοιχείο. Το πράσινο χρώμα στην παρακάτω εικόνα είναι η επένδυση που τοποθετείται γύρω από το δοχείο. Το σκούρο μπλε χρώμα φόντου γεμίζει την εσωτερική περιοχή:

Τώρα ας προσθέσουμε ένα περιθώριο στην παράγραφο. Θα προσθέσω 30 εικονοστοιχεία επάνω και κάτω επένδυση, καθώς και 20 εικονοστοιχεία αριστερά και δεξιά. Η παρακάτω εικόνα στα αριστερά δείχνει πώς αυτή η παράγραφος έχει αλλάξει από το περιθώριο. Το πραγματικό πλάτος της εικόνας είναι μικρότερο επειδή το περιθώριο απομακρύνει ένα άλλο στοιχείο HTML από το περίγραμμα. Στα δεξιά μπορείτε να δείτε ότι το πορτοκαλί χρώμα είναι το περιθώριο γύρω από το στοιχείο. Το περιθώριο είναι πάντα έξω από το padding και το σκούρο μπλε φόντο δεν εκτείνεται στην περιοχή του περιθωρίου:

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

Μετάφραση του άρθρου " CSS PADDING VS. ΠΕΡΙΘΩΡΙΟ ΚΑΙ ΠΩΣ ΝΑ ΤΑ ΧΡΗΣΙΜΟΠΟΙΗΣΕΤΕ” προετοιμάστηκε από τη φιλική ομάδα του έργου.

Καλό Κακό

Πηγή: Περιθώριο ή γέμιση;
Φίλιπ Σπορέρ.
Μετάφραση: vl49.

Πότε είναι καλύτερο να χρησιμοποιείτε περιθώρια και πότε να χρησιμοποιείτε padding για σκοπούς μορφοποίησης και έχει κάποια διαφορά;

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

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

Σε αυτό το παράδειγμα, μπορούν να διακριθούν δύο τύποι διαστημάτων:

μεταξύ καρτών (μπλε).

μεταξύ των καρτών και του δοχείου τους (πράσινο).

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

Υλοποίηση του παραδείγματος χρησιμοποιώντας CSS;

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

Δοχείο (
padding: 16px;
}
.κάρτα + .κάρτα (
περιθώριο: 0 0 0 8 εικονοστοιχεία;
}

Μόλις 2 επιλογείς και 2 κανόνες.

Τι λειτουργία εκτελεί το σύμβολο συν;

Σύμβολο + αντιπροσωπεύει παρακείμενος επιλογέας. Δείχνει μόνο το στοιχείο που ακολουθεί αμέσως το στοιχείο που έχει καθοριστεί πριν από αυτόν τον επιλογέα.

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

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

Όλα λειτουργούν καλά μέχρι να χρειαστεί να τοποθετήσουμε κάτι άλλο εκτός από μια κάρτα δίπλα στις κάρτες. Λοιπόν, ας πούμε ένα κουμπί "Προσθήκη κάρτας" ("Προσθήκη κάρτας"):

Κρίνοντας από το υπάρχον απόσπασμα κώδικα CSS, πιθανότατα δεν θα εκχωρούσαμε την κλάση .card στο νέο στοιχείο που αντιπροσωπεύει το κουμπί, καθώς δεν είναι κάρτα. Πώς μπορεί να είναι αυτό; Αξίζει να δημιουργήσετε ένα πρόσθετο όνομα κλάσης .add-card για αυτό, το οποίο περιέχει τον ίδιο κανόνα με την ιδιότητα margin με την κλάση .card; Όχι, υπάρχει καλύτερη λύση.

Κουκουβάγια με λοβοτομή *+* .

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

Δοχείο (
padding: 16px;
}
/* καλά, αναγνωρίσατε τη λοβοτομημένη κουκουβάγια; 😜 */
.container > * + * (
περιθώριο: 0 0 0 8 εικονοστοιχεία;
}

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

Στο τέλος.

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

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

υλικό παραγεμίσματος— για κενά μεταξύ του δοχείου και του περιεχομένου του.

περιθώριο— για κενά μεταξύ στοιχείων μέσα στο δοχείο.

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου του ιστολογίου. Σήμερα θέλω να συνεχίσω το θέμα της μελέτης και να εξετάσω εκείνους τους κανόνες στυλ που σας επιτρέπουν να ορίσετε εσοχές και περιγράμματα για στοιχεία Html: περίγραμμα, περιθώριο και συμπλήρωση.

Πριν από αυτό, καταφέραμε να μελετήσουμε αρκετά απλές ιδιότητες που έλεγχαν γραμματοσειρές (), κείμενο () και εξετάσαμε το μοντέλο

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

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

Μοντέλο κουτιού σε CSS - padding, περιθώριο και περίγραμμα

Τρίτον, μπορεί να χρησιμοποιηθεί τόκος. Από τι υπολογίζονται; Αποδεικνύεται ότι από το πλάτος του δοχείου(δηλαδή από την περιοχή περιεχομένου του γονικού στοιχείου). Επιπλέον, αυτό δεν ισχύει μόνο για το περιθώριο-δεξιά και αριστερά, που θα ήταν λογικό, αλλά και για το περιθώριο-πάνω και κάτω, τα ποσοστά θα υπολογίζονται ακριβώς από το πλάτος (και όχι το ύψος) του δοχείου.

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

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

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

Περιθώριο:20px 10px 40px 30px;

Και αυτό θα σημαίνει ότι το πρόγραμμα περιήγησης πάνω από το μπλοκ μας θα πρέπει να έχει εσοχές 20 pixel, στα δεξιά - 10, κάτω - 40 και στα αριστερά - 30. Δηλαδή. αυτή η καταχώρηση θα ισοδυναμούσε με:

Η μείωση του κώδικα CSS είναι ορατή με γυμνό μάτι. Αλλά αυτό δεν είναι το όριο. Είναι αρκετά αποδεκτό να χρησιμοποιείτε όχι μόνο τέσσερις, αλλά και τρεις, δύο, ακόμη και μόνο μία τιμή σε έναν προκατασκευασμένο κανόνα. Κάτι που θα βοηθήσει περαιτέρω στη μείωση του μεγέθους του κώδικα. Ωστόσο, θα είναι δυνατή η μείωση του αριθμού των τιμών μόνο σε ορισμένες περιπτώσεις:

1. Εάν τα περιθώρια στα αριστερά και στα δεξιά είναι τα ίδια, για παράδειγμα, ως εξής: margin:20px 30px 40px 30px;

   Αυτό το τελευταίο μπορεί να παραλειφθεί:

   Περιθώριο: 20 px 30 px 40 px;

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

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

2. Εάν, εκτός από την ισότητα των εξωτερικών περιθωρίων στα αριστερά και δεξιά, υπάρχει ισότητα των τιμών τους στο επάνω και στο κάτω μέρος: περιθώριο: 20px 30px 20px 30px;

   ή, τι είναι το ίδιο (λόγω του σημείου 1):

   Περιθώριο: 20 px 30 px 20 px;

   Τότε ένας τέτοιος προκατασκευασμένος κανόνας μπορεί να γραφτεί με δύο μόνο τιμές, απορρίπτοντας την τελευταία, η οποία συμπίπτει με την πρώτη:

   Περιθώριο: 20 px 30 px;

3. Σε αυτή την περίπτωση, η πρώτη τιμή περιγράφει τα εξωτερικά περιθώρια κάθετα και η δεύτερη - οριζόντια.

   Και τέλος, εάν όλες οι τιμές στον κανόνα προκατασκευής είναι ίδιες: περιθώριο: 20 px 20 px 20 px 20 px;

   ή, που είναι το ίδιο (λόγω του σημείου 2):

   Περιθώριο: 20 px 20 px; Αυτό μπορεί να χρησιμοποιηθείμέγιστος συντομευμένος τύπος εγγραφής

   (απορρίπτοντας την τελευταία τιμή που αντιστοιχεί στην πρώτη):

Περιθώριο: 20 px; Που θα σημαίνει το ίδιο περιθώριο σε όλες τις πλευρές του στοιχείου Html μας.Μιλώντας για εξωτερικά περιθώρια, αξίζει να αναφέρουμε ένα τέτοιο σχήμα όπως

"Περιθώριο-κατάρρευση"

ή, με άλλα λόγια, «κατάρρευση περιθωρίου». Με λίγα λόγια, η ουσία αυτού του φαινομένου είναι η εξής.

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

Για παράδειγμα, εάν το επάνω μπλοκ έχει οριστεί σε:

Περιθώριο:20px 20px 200px 20px;

Και για το κάτω: Περιθώριο:100px 20px 20px 20px;Στη συνέχεια, το κάτω περιθώριο του άνω μπλοκ (200 px) θα απορροφήσει το άνω περιθώριο του κάτω (100 px, και ακόμα κι αν γίνει ίσο με 199 px, τίποτα δεν θα αλλάξει) και το εξωτερικό περιθώριο που προκύπτει μεταξύ αυτών των δύο μπλοκ θα εξακολουθεί να είναι ίσο με 200 εικονοστοιχεία. Εκείνοι.

μόνο το μεγαλύτερο λαμβάνεται υπόψη

modulo Margin, και δεν αθροίζεται με κανέναν τρόπο με την τιμή μετρητή του κάθετα παρακείμενου στοιχείου.

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

Για παράδειγμα, σε αυτή την περίπτωση:

Κορυφαίο περιθώριο: 20 px 20 px -20 px 20 px; Κάτω περιθώριο: 10px 20px 20px 20px;Το προκύπτον περιθώριο μεταξύ των μπλοκ θα είναι -10 px, δηλ. το κάτω μέρος θα επικαλύπτει το επάνω στοιχείο Html κατά 10 εικονοστοιχεία.

Ένα άλλο χαρακτηριστικό της χρήσης του κανόνα Margin στο CSS είναι ότι η καθορισμένη τιμή

η κατακόρυφη για ενσωματωμένα στοιχεία αγνοείται

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

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

Λοιπόν, το πλαίσιο (Border), ή μάλλον το πλάτος του, δεν θα μπορεί επίσης να μετακινήσει άλλα γειτονικά μπλοκ κάθετα μακριά από την ετικέτα γραμμής. Για τα ενσωματωμένα στοιχεία, η κίνηση είναι δυνατή μόνο προς μία κατεύθυνση - οριζόντια και αυτό είναι όλο.

Επένδυση και περίγραμμα - εσωτερική επένδυση και πλαίσια

Ας προχωρήσουμε τώρα στη ρύθμιση padding χρησιμοποιώντας τον κανόνα Padding και να δούμε ακριβώς ποιες τιμές μπορεί να πάρει:

Όπως μπορείτε να δείτε, δεν υπάρχει καμία αναφορά στο Auto εδώ και αυτός ο κανόνας CSS δεν επιτρέπει τη χρήση αρνητικών τιμών (μπορεί να είναι μόνο θετικές - από το μηδέν και πάνω). Εκείνοι. Δεν υπάρχει τρόπος να προωθήσετε περιεχόμενο πέρα ​​από το πλαίσιο χρησιμοποιώντας το Padding. Το μέγιστο που μπορεί να γίνει είναι να φέρει το περιεχόμενο πολύ κοντά στο πλαίσιο.

Τα ποσοστά σε αυτό υπολογίζονται με τον ίδιο τρόπο όπως στο Περιθώριο - σε σχέση με το πλάτος του κοντέινερ (η περιοχή περιεχομένου του γονικού στοιχείου) στο οποίο περικλείεται το στοιχείο μας. Composite Padding Rule σε Cssσχηματίζεται και υπακούει στους ίδιους νόμους που αναφέρθηκαν παραπάνω:

Επένδυση:20px 10px 40px 30px;

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

Και το τελευταίο πράγμα που θα ήθελα να εξετάσω σήμερα είναι το πλαίσιο που ρυθμίζεται χρησιμοποιώντας Σύνορο. Έχουν τρεις τύπους παραμέτρων:

1. Πλάτος περιγράμματος — ορίζει το πάχος του περιγράμματος
2. Border-color — ορίζει το χρώμα του
3. Στυλ περιγράμματος - ο τύπος του πλαισίου ή ο τύπος της γραμμής με την οποία θα σχεδιαστεί

Και οι τρεις από αυτούς τους κανόνες CSS έχουν ένα έγκυρο σύνολο τιμών:

Πλάτος γραμμής για πλαίσιο ( πλάτος συνόρων) μπορεί να καθοριστεί είτε χρησιμοποιώντας αριθμούς σε Em, Ex ή Px, είτε με λέξεις:

1. Λεπτή - λεπτή γραμμή?
2. Μεσαίο - μέσος όρος (αυτή η τιμή χρησιμοποιείται από προεπιλογή).
3. Χοντρό - χοντρό.

border-width:2px;

Ως τιμή για το χρώμα του πλαισίου ( Περίγραμμα-χρώμα) μπορείτε να χρησιμοποιήσετε τις αποδεκτές μεθόδους για τον καθορισμό τους (δεκαεξαδικός κώδικας, λέξεις κ.λπ.):

Χρώμα περιγράμματος:κόκκινο;

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

1. Κανένα - χωρίς πλαίσιο (προεπιλογή)
2. Διακεκομμένη - η γραμμή σχεδιάζεται σε τελείες
3. Διακεκομμένη - διακεκομμένη γραμμή
4. Συμπαγής - συμπαγής γραμμή
5. Διπλή - διπλή γραμμή
6. Groove - πιεσμένο πλαίσιο
7. Κορυφογραμμή - προεξέχουσα
8. Inset and start - παιχνίδια σκιών

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

Το ίδιο θα ισχύει και για προκατασκευασμένοι κανόνες συνόρων— μπορεί να καθοριστεί τόσο για όλες τις πλευρές ταυτόχρονα (Περίγραμμα) όσο και για κάθε πλευρά ξεχωριστά (Περιγραμματό πάνω, αριστερά, κάτω και δεξιά). Η σειρά των τιμών δεν είναι σημαντική:

Περίγραμμα: 1 px συμπαγές κόκκινο;

Εάν χάσετε κάτι, θα χρησιμοποιηθεί η προεπιλεγμένη τιμή.

Καλή σου τύχη! Τα λέμε σύντομα στις σελίδες του ιστότοπου του ιστολογίου

Μπορείτε να παρακολουθήσετε περισσότερα βίντεο μεταβαίνοντας στο

");">

Μπορεί να σας ενδιαφέρει

Ύψος, πλάτος και υπερχείλιση - Κανόνες CSS για την περιγραφή της περιοχής περιεχομένου σε διάταξη μπλοκ
Θέση (απόλυτη, σχετική και σταθερή) - τρόποι τοποθέτησης στοιχείων Html στο CSS (κανόνες αριστερά, δεξιά, πάνω και κάτω) Διαφορετικό στυλ για εσωτερικούς και εξωτερικούς συνδέσμους μέσω CSS
Float and clear in CSS - block layout tools
Εμφάνιση (μπλοκ, κανένα, ενσωματωμένο) σε CSS - ορίστε τον τύπο εμφάνισης των στοιχείων Html στην ιστοσελίδα

18 Οκτωβρίου 2017 στις 3:36 μ.μ

Οργάνωση εσοχών στη διάταξη (περιθώριο/επένδυση)

• CSS
• HTML

• Φροντιστήριο

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

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

Βασικές αρχές:

1. Η εσοχή δίνεται στο τελευταίο δυνατό στοιχείο στο σπίτι.
2. Οι εσοχές δεν μπορούν να οριστούν για ανεξάρτητα στοιχεία (μπλοκ BEM).
3. Για το τελευταίο στοιχείο της ομάδας, η εσοχή μηδενίζεται (πάντα).

Οι εσοχές πηγαίνουν από το προηγούμενο στοιχείο στο επόμενο.

Τα περιθώρια ορίζονται από το προηγούμενο στοιχείο στο επόμενο, από το πρώτο στο δεύτερο, από πάνω προς τα κάτω, από αριστερά προς τα δεξιά.

Αυτό σημαίνει ότι ιδιότητες όπως margin-αριστερά και margin-top δεν χρησιμοποιούνται(όχι χωρίς εξαιρέσεις). Με το padding, όλα είναι λίγο αντίθετα (εκτός από το ότι χρησιμοποιείται για διακοσμητικούς σκοπούς, αύξηση της περιοχής συνδέσμου κ.λπ.). Όταν ένα μπλοκ χρειάζεται επένδυση επάνω ή αριστερά, το λαμβάνει από το padding-top και padding-αριστερό του γονέα.

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

Η εσοχή δίνεται στο τελευταίο δυνατό στοιχείο στο σπίτι

Τα περιθώρια ορίζονται μόνο μεταξύ γειτονικών στοιχείων του δεντρόσπιτου.

Στο παράδειγμα υπάρχουν 3 λίστες, στην ακόλουθη δομή:

Η εσοχή γίνεται όχι σε βάρος των παιδικών στοιχείων, αλλά σε βάρος των γειτονικών.

Σε αυτήν την περίπτωση, το .main-section__item είναι το τελευταίο δυνατό που μπορεί να δημιουργηθεί για να διαχωριστούν οι λίστες. Το ίδιο αποτέλεσμα μπορεί να επιτευχθεί με την εσοχή ενός div, μιας λίστας, μιας γραμμής ή ενός συνδέσμου, αλλά αυτό δεν θα είναι σωστό.

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

επικεφαλίδα σε μια ενότητα επτά λέξεων

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

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

Τα πραγματικά προβλήματα μπορεί να προκύψουν όταν η διάταξη με κακή δομή εσοχής αποδίδεται δυναμικά ή διπλό.

Δεν είναι δυνατό να οριστούν εσοχές για ανεξάρτητα στοιχεία (μπλοκ BEM)

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

Εάν χρειάζεται να κάνετε εσοχή σε ένα μπλοκ. Χωρίς προκατάληψη, αυτό γίνεται χρησιμοποιώντας:

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

.block__item > .block ( margin-right: 10px; ) .block.block__item (margin-right: 10px; ) .block-wrap > .block (margin-right: 10px; )

Το τελευταίο στοιχείο της ομάδας έχει την επαναφορά της εσοχής στο μηδέν (πάντα)

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

Αυτό είναι ένα οριζόντιο μενού και λογότυπο (το οποίο για κάποιο λόγο βρίσκεται στα δεξιά).

Για το τελευταίο li, η εσοχή μηδενίζεται. Και η εσοχή γίνεται μεταξύ γειτονικών στοιχείων ul και img. Τι συζητήθηκε στη δεύτερη αρχή.

Ας πάρουμε ένα άλλο παράδειγμα:

Μας ενδιαφέρει το περιθώριο μεταξύ των ειδήσεων που είναι set.blog-preview__item (margin-bottom: 20px;). Το τελευταίο περιθώριο επαναφέρεται στο μηδέν και η κάτω εσοχή γίνεται με την προσθήκη προεπισκόπησης ιστολογίου . Τι συζητήθηκε στη δεύτερη αρχή.

Πιο συχνά από άλλες ψευδο-τάξεις, θα πρέπει να χρησιμοποιείτε:last-child.

Item:not(:last-child) ( margin-bottom: 20px; ) // ή // .item ( // other styles // margin-bottom: 20px; &:last-child ( margin-bottom: 0; ) ) // ή margin-top, η κύρια ιδέα εδώ δεν είναι προς την κατεύθυνση του περιθωρίου, αλλά ελλείψει περίσσειας // .item + .item ( margin-top: 20px; ) // or // .item ( / / άλλα στυλ // & + & ( margin-top: 20px; ) )

Εξαιρέσεις

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

P.S.Σας συμβουλεύω να διαβάσετε τη δημοσίευση