” etichetați și setați-i „ culoare ' La negru:

>
= „../book.jpg” înălţime = 'cincizeci%' ; lăţime = 'cincizeci%' >

= „culoare de fundal: dodgerblue” >
= 'culoarea neagra;' > Bun venit la Linuxhint >
>
>

După compilarea codului de mai sus, rezultatul arată astfel:

---

---

„

” eticheta este în partea de jos a paginii web înainte de a aplica o marjă negativă.

Utilizarea proprietății de partea superioară a marjei negative

Adăuga ' margine-top ” proprietate la “

” element și dați-i valoarea în negativ. De exemplu, aici -15% este valoarea proprietății margin-top:

>
= „../book.jpg” înălţime = 'cincizeci%' ; lăţime = 'cincizeci%' >

= „culoarea fundalului: dodgerblue” >
= 'culoare: negru; margine-top: -15%;' > Bun venit la Linuxhint >
>
>

După executarea codului, pagina web arată astfel:

Rezultatul afișează că marginea negativă de sus face ca elementul „

” să fie afișat în fața elementului părinte.

Utilizarea proprietății de inferioară a marjei negative

Aplicați aceleași proprietăți ca mai sus și schimbați doar „ margine-fond ” proprietate. După aceea, adăugați o imagine în partea de jos a elementului „

” pentru a vedea modificările vizuale:

< div stil = „culoarea fundalului: dodgerblue” >
< h3 stil = 'culoare: negru; margine-jos: -5%;' > Bun venit la Linuxhint h3 >
div >
< img src = „../book.jpg” înălţime = 'cincizeci%' ; lăţime = 'cincizeci%' >

După actualizarea codului pagina noastră web arată astfel:

Rezultatul de mai sus arată că textul obține marja inferioară de -5%.

Utilizarea proprietății drepte marje negative

Oferind -55% valoarea proprietății margin-right elementului

, acesta se mișcă în direcția opusă:

< div stil = „culoare-fond:dodgerblue;” >
< h3 stil = 'culoare: negru; margine-stânga: -55%; ' > Bun venit la Linuxhint < / h3 >
< / div >
< img src = „../book.jpg” înălţime = 'cincizeci%' ; lăţime = 'cincizeci%' >

După executarea codului de ieșire, arată astfel:

Rezultatul arată că textul primește marja negativă-dreapta.

Utilizarea proprietății din stânga marjei negative

Proprietatea margin-left care are o valoare negativă funcționează în același mod. În codul de mai jos, elementul „

” se deplasează cu 50% în partea stângă în direcția opusă proprietății margin-left:

= „culoare-fond:dodgerblue;” >
= 'culoare: negru; margine-stânga: -50%;' > Bun venit la Linuxhint >
>
= „../book.jpg” înălţime = 'cincizeci%' ; lăţime = 'cincizeci%' >

Rezultatul codului de mai sus este:

Așa funcționează marja negativă în CSS.

De ce este margin-top:-5 != margin-bottom:5?

Cand ' marjă de jos: 5% ” este folosit, adaugă o marjă din partea inferioară spre centrul elementului, dar când „ margine-top: -5% ” se folosește se adaugă o marjă de 5% din partea de sus dar în direcția opusă (în afara paginii).

Concluzie

În CSS, marja negativă funcționează în direcția opusă prin atribuirea valorii marjei. Mută ​​conținutul elementului în direcția spre exterior/în afara paginii. „Margin-top:-5″ nu este egal cu „margin-bottom:5” deoarece ambele valori ale proprietăților mută conținutul în direcții opuse corespunzătoare poziției părinte. Acest articol a demonstrat cu succes cum funcționează marja negativă.