tag ' dan tetapkan ' warna ” kepada hitam:

>
= '../book.jpg' ketinggian = 'lima puluh%' ; lebar = 'lima puluh%' >
= 'warna latar belakang: dodgeblue' >

= 'warna: hitam;' > Selamat datang ke Linuxhint >
>
>

Selepas menyusun kod di atas, output kelihatan seperti:

---

---

'

teg ” berada di bahagian bawah halaman web sebelum menggunakan margin negatif.

Menggunakan Harta Teratas Margin Negatif

Tambah ' margin-top ” harta kepada “

” unsur dan berikan nilainya dalam negatif. Sebagai contoh, di sini -15% ialah nilai harta margin atas:

>
= '../book.jpg' ketinggian = 'lima puluh%' ; lebar = 'lima puluh%' >
= 'warna latar belakang:dodgeblue' >

= 'warna: hitam; margin atas: -15%;' > Selamat datang ke Linuxhint >
>
>

Selepas melaksanakan kod, halaman web kelihatan seperti ini:

Output memaparkan bahawa margin atas negatif menjadikan elemen '

' dipaparkan di hadapan elemen induk.

Menggunakan Harta Bawah Margin Negatif

Gunakan sifat yang sama seperti di atas dan ubah sahaja “ margin-bawah ” harta benda. Selepas itu, tambahkan imej di bahagian bawah elemen '

' untuk melihat perubahan visual:

< div gaya = 'warna latar belakang:dodgeblue' >
< h3 gaya = 'warna: hitam; margin-bawah: -5%;' > Selamat datang ke Linuxhint h3 >
div >
< img src = '../book.jpg' ketinggian = 'lima puluh%' ; lebar = 'lima puluh%' >

Selepas mengemas kini kod halaman web kami kelihatan seperti ini:

Output di atas menunjukkan bahawa teks mendapat margin bawah sebanyak -5%.

Menggunakan Harta Kanan Margin Negatif

Dengan memberikan nilai -55% sifat margin-kanan kepada elemen

, ia bergerak ke arah yang bertentangan:

< div gaya = 'warna latar belakang:dodgeblue;' >
< h3 gaya = 'warna: hitam; jidar-kiri: -55%; ' > Selamat datang ke Linuxhint < / h3 >
< / div >
< img src = '../book.jpg' ketinggian = 'lima puluh%' ; lebar = 'lima puluh%' >

Selepas melaksanakan output kod kelihatan seperti ini:

Output menunjukkan bahawa teks mendapat margin-kanan negatif.

Menggunakan Harta Kiri Margin Negatif

Sifat margin-kiri yang mempunyai nilai negatif berfungsi dengan cara yang sama. Dalam kod di bawah, elemen '

' bergerak 50% ke sebelah kiri dalam arah yang bertentangan dengan sifat margin-kiri:

= 'warna latar belakang:dodgeblue;' >

= 'warna: hitam; jidar-kiri: -50%;' > Selamat datang ke Linuxhint >
>
= '../book.jpg' ketinggian = 'lima puluh%' ; lebar = 'lima puluh%' >

Output kod di atas ialah:

Begitulah cara margin negatif berfungsi dalam CSS.

Mengapa margin-top:-5 != margin-bottom:5?

Apabila ' margin bawah: 5% ' digunakan ia menambah margin dari bahagian bawah ke arah tengah elemen tetapi apabila ' margin atas:-5% ” digunakan ia menambah margin 5% dari atas tetapi dalam arah yang bertentangan (di luar dari halaman).

Kesimpulan

Dalam CSS, margin negatif berfungsi dalam arah yang bertentangan dengan memberikan nilai margin. Ia menggerakkan kandungan elemen ke arah luar/luar halaman. “margin-top:-5″ tidak sama dengan “margin-bottom:5” kerana kedua-dua nilai sifat mengalihkan kandungan ke arah bertentangan yang sepadan dengan kedudukan induk. Artikel ini telah berjaya menunjukkan cara margin negatif berfungsi.