Margin Negatif dalam CSS: Bagaimana Ia Sebenarnya Berfungsi?

Jing Negatif dalam CSS: Penyelaman Lebih Dalam

Jing negatif, walaupun sah dalam CSS, sering menimbulkan kekeliruan dan salah faham. Artikel ini menyelidiki selok-belok margin negatif, meneroka mekaniknya dan menjawab soalan biasa seperti perbezaan antara margin-atas: -5px dan margin-bawah: 5px.

Menurut spesifikasi CSS, margin negatif mengurangkan saiz daripada kotak margin sambil membiarkan kandungan dan kotak padding tidak terjejas. Ini jelas secara visual apabila digunakan pada elemen kedudukan mutlak seperti contoh yang diberikan. Walaupun kehilangan ruang dalam kotak jidar, elemen itu sendiri dianjak ke atas, disebabkan oleh anjakan kotak jidar.

Tidak seperti jidar positif, yang memanjangkan kotak jidar ke luar, jidar negatif "menimbulkan" dan elemen dengan mengecilkan kotak margin secara visual. Pengecutan ini mewujudkan ilusi elemen yang ditolak ke atas.

Perbezaan antara margin-atas:-5px dan margin-bawah:5px

Perbezaan antara margin-atas :-5px dan margin-bottom:5px terletak pada kedudukan relatifnya. margin-top:-5px menolak kotak margin ke atas, dengan berkesan menganjakkan elemen ke bawah sebanyak 5px. Sebaliknya, margin-bottom:5px meningkatkan saiz kotak margin di bawah elemen, menyebabkan ia bergerak ke bawah sebanyak 5px.

Dalam konteks pemusatan menegak, adalah penting untuk menetapkan kedua-dua bahagian atas dan bawah margin kepada -50% dan bukannya -8px untuk mencapai penjajaran yang betul. Ini kerana margin dalam peratusan dikira berdasarkan lebar blok yang mengandungi, bukan ketinggiannya.

Atas ialah kandungan terperinci Margin Negatif dalam CSS: Bagaimana Ia Sebenarnya Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!