Ο ' περιθώριο-κορυφή Η ιδιότητα βοηθά πολλούς προγραμματιστές στη δημιουργία αποκριτικών διατάξεων και την τοποθέτηση στοιχείων HTML. Η χρήση της ιδιότητας 'margin-top' παρέχει περισσότερο έλεγχο στα στοιχεία HTML, προσθέτει οπτικό διαχωρισμό και βοηθά στη δημιουργία σχεδίων με καλύτερη απόκριση. Αυτός ο οδηγός δείχνει την ιδιότητα margin-top με πρακτική εφαρμογή στο CSS.
- Τι είναι το ακίνητο 'margin-top';
- Χρησιμοποιήστε την ιδιότητα 'margin-top' με θετική τιμή
- Χρησιμοποιήστε την ιδιότητα 'margin-top' με αρνητική τιμή
Τι είναι το ακίνητο 'margin-top';
Ο ' περιθώριο-κορυφή Η ιδιότητα ' χρησιμοποιείται για τη δημιουργία επιπλέον χώρου μεταξύ στοιχείων HTML. Μπορεί να ρυθμιστεί τόσο με θετικές όσο και με αρνητικές τιμές. Αυτές οι τιμές ορίζονται σύμφωνα με τις ανάγκες του σχεδιασμού και βοηθούν στην αποφυγή επικάλυψης και προσαρμογής του διαστήματος μεταξύ των στοιχείων HTML.
Πώς να χρησιμοποιήσετε την ιδιότητα 'margin-top' με θετική αξία;
Η ιδιότητα 'margin-top' με θετική τιμή προσθέτει επιπλέον απόσταση από την επάνω θέση προς το κέντρο του επιλεγμένου στοιχείου HTML. Η παρεχόμενη τιμή μπορεί να είναι σε pixel, ποσοστό, rem ή σε καθολικές τιμές όπως auto, inherit, unset κ.λπ. Ας δούμε ένα παράδειγμα για καλύτερη κατανόηση:
Παράδειγμα: Αξιοποίηση Θετικής Αξίας
Ας υποθέσουμε ότι ένα αρχείο HTML δημιουργεί ένα ' Μετά τη δημιουργία της δομής HTML, εφαρμόστε ιδιότητες CSS στο ' θετικός ” τάξη: Στο παραπάνω απόσπασμα κώδικα: Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα μοιάζει με αυτό: Το παραπάνω gif απεικονίζει το αποτέλεσμα της ρύθμισης της τιμής της ιδιότητας margin-top στην ιστοσελίδα. Ο ' περιθώριο-κορυφή Η ιδιότητα ' με αρνητική τιμή ορίζει επιπλέον διάστημα από την επάνω θέση απέναντι από το κέντρο ή προς το εξωτερικό της σελίδας σε σχέση με το επιλεγμένο στοιχείο HTML. Χρησιμοποιείται κυρίως για τη δημιουργία επικαλυπτόμενων εφέ ή για την τοποθέτηση του στοιχείου HTML. Ας δούμε ένα παράδειγμα για καλύτερη κατανόηση. Παράδειγμα: Χρήση Αρνητικής Αξίας Ας υποθέσουμε ότι ένα αρχείο HTML δημιουργεί ένα ' Η περιγραφή του προαναφερθέντος αποσπάσματος κώδικα περιγράφεται παρακάτω: Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα εμφανίζεται ως εξής: Το παραπάνω gif εμφανίζει το αποτέλεσμα που εμφανίζεται στη σχεδίαση της ιστοσελίδας ορίζοντας την αρνητική τιμή για την ιδιότητα margin-top. Ο ' περιθώριο-κορυφή Η ιδιότητα ' χρησιμοποιείται για τη δημιουργία επιπλέον χώρου μεταξύ στοιχείων HTML. Μπορεί να ρυθμιστεί τόσο με θετικές όσο και με αρνητικές τιμές. Εάν η ιδιότητα 'margin-top' εκχωρηθεί με μια θετική τιμή, τότε ο επιπλέον χώρος προστίθεται προς το κέντρο της ιστοσελίδας ή του επιλεγμένου στοιχείου HTML. Σε περίπτωση «αρνητικής» τιμής ο χώρος προστίθεται αλλά προς το εξωτερικό της σελίδας. Αυτό το άρθρο δείχνει τι είναι η ιδιότητα margin-top στο CSS.
< σώμα >
< div τάξη = 'θετικός' >
< Π > Εκχωρείται κορυφή περιθωρίου με θετική τιμή Π >
div >
σώμα >
< στυλ >
.θετικός {
πλάτος: 300 px;
ύψος: 200 px;
Χρώμα φόντου: δασοπράσινο;
μέγεθος γραμματοσειράς: 20 px;
χρώμα: #fff;
margin-top: 50px;
}
στυλ >
Πώς να χρησιμοποιήσετε την ιδιότητα 'margin-top' με αρνητική τιμή;
.αρνητικός {
άσπρο χρώμα;
text-align: κέντρο;
χρώμα του φόντου: το κόκκινο ;
margin-top: -30 εικονοστοιχεία ;
padding: 30px;
ύψος: 100 px;
}
στυλ >
< σώμα >
< div τάξη = 'αρνητικός' >
Εκχωρείται η Αρνητική τιμή Για Ακίνητο περιθωρίου κορυφής
div >
σώμα >
συμπέρασμα