' tag και ορίστε το ' χρώμα ” στο μαύρο:

<κέντρο >
= '../book.jpg' ύψος = 'πενήντα%' ; πλάτος = 'πενήντα%' >

= 'χρώμα φόντου: μπλε μπλε' >
στυλ = 'χρωμα μαυρο;' > Καλώς ήρθατε στο Linuxhint >
>
>

Μετά τη μεταγλώττιση του παραπάνω κώδικα, η έξοδος μοιάζει με:

---

---

Ο '

Η ετικέτα ' βρίσκεται στο κάτω μέρος της ιστοσελίδας πριν εφαρμόσετε αρνητικό περιθώριο.

Χρήση ιδιότητας αρνητικού περιθωρίου κορυφής

Προσθήκη ' περιθώριο-κορυφή ' ακίνητο προς το '

” στοιχείο και δώστε την αξία του αρνητικά. Για παράδειγμα, εδώ -15% είναι η αξία της ιδιότητας margin-top:

<κέντρο >
= '../book.jpg' ύψος = 'πενήντα%' ; πλάτος = 'πενήντα%' >

= 'χρώμα φόντου: dodgeblue' >
στυλ = 'χρώμα: μαύρο; margin-top: -15%;' > Καλώς ήρθατε στο Linuxhint >
>
>

Μετά την εκτέλεση του κώδικα, η ιστοσελίδα μοιάζει με αυτό:

Η έξοδος δείχνει ότι η κορυφή του αρνητικού περιθωρίου κάνει το στοιχείο '

' να εμφανίζεται μπροστά από το γονικό στοιχείο.

Χρήση της ιδιότητας Negative Margin Bottom

Εφαρμόστε τις ίδιες ιδιότητες όπως παραπάνω και απλώς αλλάξτε το ' περιθώριο-κάτω ” ιδιοκτησία. Μετά από αυτό, προσθέστε μια εικόνα στο κάτω μέρος του στοιχείου '

' για να δείτε οπτικές αλλαγές:

< div στυλ = 'χρώμα φόντου: dodgeblue' >
< h3 στυλ = 'χρώμα: μαύρο; περιθώριο-κάτω: -5%;' > Καλώς ήρθατε στο Linuxhint h3 >
div >
< img src = '../book.jpg' ύψος = 'πενήντα%' ; πλάτος = 'πενήντα%' >

Μετά την ενημέρωση του κώδικα η ιστοσελίδα μας μοιάζει με αυτό:

Η παραπάνω έξοδος δείχνει ότι το κείμενο αποκτά το κάτω περιθώριο -5%.

Χρήση της ιδιότητας αρνητικού περιθωρίου δεξιά

Δίνοντας -55% τιμή της ιδιότητας margin-right στο στοιχείο

, κινείται προς την αντίθετη κατεύθυνση:

< div στυλ = 'χρώμα φόντου: dodgeblue;' >
< h3 στυλ = 'χρώμα: μαύρο; περιθώριο αριστερά: -55%; ' > Καλώς ήρθατε στο Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' ύψος = 'πενήντα%' ; πλάτος = 'πενήντα%' >

Μετά την εκτέλεση της εξόδου του κώδικα μοιάζουμε με αυτό:

Η έξοδος δείχνει ότι το κείμενο παίρνει το αρνητικό περιθώριο δεξιά.

Χρησιμοποιώντας την αριστερή ιδιότητα αρνητικού περιθωρίου

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

' μετακινείται κατά 50% προς την αριστερή πλευρά προς την αντίθετη κατεύθυνση από την ιδιότητα στο αριστερό περιθώριο:

= 'χρώμα φόντου: dodgeblue;' >
στυλ = 'χρώμα: μαύρο; περιθώριο-αριστερό: -50%;' > Καλώς ήρθατε στο Linuxhint >
>
= '../book.jpg' ύψος = 'πενήντα%' ; πλάτος = 'πενήντα%' >

Η έξοδος του παραπάνω κώδικα είναι:

Έτσι λειτουργεί το αρνητικό περιθώριο στο CSS.

Γιατί είναι margin-top:-5 != margin-bottom:5;

Οταν ο ' margin-bottom:5% ' χρησιμοποιείται προσθέτει ένα περιθώριο από την κάτω πλευρά προς το κέντρο του στοιχείου αλλά όταν ' margin-top:-5% Χρησιμοποιείται προσθέτει περιθώριο 5% από την κορυφή αλλά προς την αντίθετη κατεύθυνση (έξω από τη σελίδα).

συμπέρασμα

Στο CSS, το αρνητικό περιθώριο λειτουργεί προς την αντίθετη κατεύθυνση εκχωρώντας την τιμή του περιθωρίου. Μετακινεί το περιεχόμενο του στοιχείου προς τα έξω/έξω από τη σελίδα. Το 'margin-top:-5' δεν είναι ίσο με το 'margin-bottom:5' επειδή και οι δύο τιμές ιδιοτήτων μετακινούν το περιεχόμενο σε αντίθετες κατευθύνσεις που αντιστοιχούν στη γονική θέση. Αυτό το άρθρο έχει δείξει με επιτυχία πώς λειτουργεί το αρνητικό περιθώριο.