' beri tag dan atur ' warna ” menjadi hitam:

>
= '../buku.jpg' tinggi = 'lima puluh%' ; lebar = 'lima puluh%' >
= 'warna latar belakang: dodgerblue' >

= 'warna hitam;' > Selamat datang di Linuxint >
>
>

Setelah mengkompilasi kode di atas, hasilnya terlihat seperti:

---

---

“

” ada di bagian bawah halaman web sebelum menerapkan margin negatif.

Menggunakan Properti Teratas Margin Negatif

Menambahkan ' margin-atas properti ” ke “

” elemen dan berikan nilainya dalam negatif. Misalnya, di sini -15% adalah nilai properti margin-top:

>
= '../buku.jpg' tinggi = 'lima puluh%' ; lebar = 'lima puluh%' >
= 'warna latar belakang: dodgerblue' >

= 'warna: hitam; margin-atas: -15%;' > Selamat datang di Linuxint >
>
>

Setelah mengeksekusi kode, halaman web terlihat seperti ini:

Output menampilkan bahwa margin-top negatif membuat elemen '

' ditampilkan di depan elemen induk.

Menggunakan Properti Bawah Margin Negatif

Terapkan properti yang sama seperti di atas dan cukup ubah ' margin-bawah ' Properti. Setelah itu, tambahkan gambar di bagian bawah elemen “

” untuk melihat perubahan visual:

< div gaya = 'warna latar belakang: dodgerblue' >
< h3 gaya = 'warna: hitam; margin bawah: -5%;' > Selamat datang di Linuxint h3 >
div >
< img src = '../buku.jpg' tinggi = 'lima puluh%' ; lebar = 'lima puluh%' >

Setelah memperbarui kode, halaman web kami terlihat seperti ini:

Output di atas menunjukkan bahwa teks mendapatkan margin bawah -5%.

Menggunakan Properti Hak Margin Negatif

Dengan memberikan nilai -55% dari properti margin-right ke elemen

, ia bergerak ke arah yang berlawanan:

< div gaya = 'warna latar belakang: dodgerblue;' >
< h3 gaya = 'warna: hitam; margin-kiri: -55%; ' > Selamat datang di Linuxint < / h3 >
< / div >
< img src = '../buku.jpg' tinggi = 'lima puluh%' ; lebar = 'lima puluh%' >

Setelah mengeksekusi keluaran kode terlihat seperti ini:

Output menunjukkan bahwa teks mendapatkan margin-kanan negatif.

Menggunakan Properti Negatif Margin Kiri

Properti margin-left yang memiliki nilai negatif bekerja dengan cara yang sama. Pada kode di bawah ini, elemen “

” bergerak 50% ke sisi kiri berlawanan arah dengan properti margin-left:

= 'warna latar belakang: dodgerblue;' >

= 'warna: hitam; margin-kiri: -50%;' > Selamat datang di Linuxint >
>
= '../buku.jpg' tinggi = 'lima puluh%' ; lebar = 'lima puluh%' >

Output dari kode di atas adalah:

Begitulah cara kerja margin negatif di CSS.

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

Ketika ' margin-bawah:5% ” digunakan itu menambahkan margin dari sisi bawah ke tengah elemen tetapi ketika “ margin-atas:-5% ” digunakan untuk menambahkan margin 5% dari atas tetapi berlawanan arah (di luar halaman).

Kesimpulan

Di CSS, margin negatif bekerja berlawanan arah dengan menetapkan nilai margin. Ini memindahkan konten elemen ke arah luar/di luar halaman. “margin-top:-5″ tidak sama dengan “margin-bottom:5” karena kedua nilai properti memindahkan konten ke arah yang berlawanan sesuai dengan posisi induk. Artikel ini telah berhasil menunjukkan bagaimana margin negatif bekerja.