Margin Negatif dalam CSS: Mengapa margin-top:-5 Tidak Sama dengan margin-bottom:5?

Menyelidiki Margin Negatif: Tingkah Laku, Intuisi dan Perbezaan

CSS membenarkan margin negatif, tetapi kesannya boleh mengelirukan. Untuk menafikan topik ini, mari kita terokai tingkah laku mereka dan fahami sebab margin-top:-5 tidak bersamaan dengan margin-bottom:5.

Memahami Margin Negatif

Negatif jidar digunakan di luar sempadan dan tidak kelihatan dalam jidar visual. Ini kerana ia menjejaskan kotak margin sambil membiarkan kandungan dan kotak padding tidak disentuh. Untuk elemen yang diposisikan secara mutlak, jidar negatif mengalihkan elemen mengikut jumlah yang ditentukan tanpa menjejaskan reka letak.

Perwakilan Grafik

Bayangkan elemen dengan jidar atas negatif:

[Imej segi empat tepat dengan jidar atas negatif]

Kotak jidar mengecil sebanyak jumlah negatif, tetapi kandungan dan kotak pelapik kekal tidak terjejas.

Gerak Hati Di Sebalik Jidar Negatif

Jind negatif "menimbulkan" elemen kerana ia mengurangkan saiz kotak margin. Untuk margin atas < 0, ini menyebabkan elemen bergerak ke atas.

Perbezaan Antara Margin Atas dan Bawah

margin-atas:-8px tidak sama dengan margin-bawah:8px kerana margin runtuh. Apabila elemen mempunyai kedua-dua margin negatif dan positif pada sisi bertentangan, margin runtuh, menghapuskan margin negatif. Akibatnya, tiada pergerakan bersih berlaku.

Petua Bonus untuk Pemusatan Menegak

Apabila menggunakan % untuk jidar sisi (iaitu, atas atau bawah), nilai dikira sebagai peratusan lebar blok yang mengandungi. Ini boleh membawa kepada isu dengan pemusatan menegak. Lebih baik menggunakan margin-top:-50vh untuk pemusatan menegak, dengan vh menandakan unit untuk ketinggian viewport.

Atas ialah kandungan terperinci Margin Negatif dalam CSS: Mengapa margin-top:-5 Tidak Sama dengan margin-bottom:5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!