” tag e imposta il suo “ colore ' annerire:

>
= '../libro.jpg' altezza = 'cinquanta%' ; larghezza = 'cinquanta%' >
= 'colore di sfondo: dodgerblue' >
= 'colore nero;' > Benvenuto in Linuxhint >
>
>

Dopo aver compilato il codice precedente, l'output sarà simile a:

---

---

IL '

” si trova nella parte inferiore della pagina Web prima di applicare un margine negativo.

Utilizzo della proprietà superiore del margine negativo

Aggiungere ' margine superiore ” proprietà al “

” elemento e dare il suo valore in negativo. Ad esempio, qui -15% è il valore della proprietà margin-top:

>
= '../libro.jpg' altezza = 'cinquanta%' ; larghezza = 'cinquanta%' >
= 'colore di sfondo: Dodgerblue' >
= 'colore: nero; margine superiore: -15%;' > Benvenuto in Linuxhint >
>
>

Dopo aver eseguito il codice, la pagina web avrà questo aspetto:

L'output mostra che il margin-top negativo fa visualizzare l'elemento '

' davanti all'elemento genitore.

Utilizzo della proprietà inferiore del margine negativo

Applica le stesse proprietà di cui sopra e cambia semplicemente il ' margine inferiore ' proprietà. Successivamente, aggiungi un'immagine nella parte inferiore dell'elemento '

' per vedere i cambiamenti visivi:

< div stile = 'colore di sfondo: Dodgerblue' >
< h3 stile = 'colore: nero; margine inferiore: -5%;' > Benvenuti in Linuxhint h3 >
div >
< imm src = '../libro.jpg' altezza = 'cinquanta%' ; larghezza = 'cinquanta%' >

Dopo aver aggiornato il codice, la nostra pagina web si presenta così:

L'output sopra mostra che il testo sta ottenendo il margine inferiore del -5%.

Utilizzo della proprietà destra del margine negativo

Assegnando il valore -55% della proprietà margin-right all'elemento

, si muove nella direzione opposta:

< div stile = 'colore-di-sfondo:dodgerblue;' >
< h3 stile = 'colore: nero; margine sinistro: -55%; ' > Benvenuti in Linuxhint < / h3 >
< / div >
< imm src = '../libro.jpg' altezza = 'cinquanta%' ; larghezza = 'cinquanta%' >

Dopo aver eseguito l'output del codice simile a questo:

L'output mostra che il testo riceve il margine destro negativo.

Utilizzo della proprietà del margine sinistro negativo

La proprietà margin-left con valore negativo funziona allo stesso modo. Nel codice seguente, l'elemento '

' si sposta del 50% a sinistra nella direzione opposta alla proprietà margin-left:

= 'colore-di-sfondo:dodgerblue;' >
= 'colore: nero; margine sinistro: -50%;' > Benvenuto in Linuxhint >
>
= '../libro.jpg' altezza = 'cinquanta%' ; larghezza = 'cinquanta%' >

L'output del codice precedente è:

Ecco come funziona il margine negativo nei CSS.

Perché margin-top:-5 != margin-bottom:5?

Quando il ' margine inferiore: 5% ” viene utilizzato aggiunge un margine dal lato inferiore verso il centro dell'elemento ma quando “ margine superiore: -5% ” viene utilizzato aggiunge un margine del 5% dall'alto ma nella direzione opposta (fuori dalla pagina).

Conclusione

In CSS, il margine negativo funziona nella direzione opposta assegnando il valore del margine. Sposta il contenuto dell'elemento nella direzione verso l'esterno/all'esterno della pagina. Il 'margin-top:-5' non è uguale a 'margin-bottom:5' perché entrambi i valori della proprietà spostano il contenuto in direzioni opposte corrispondenti alla posizione principale. Questo articolo ha dimostrato con successo come funziona il margine negativo.