Margin Negatif dalam CSS: Mengapa Mereka Menolak Elemen Ke Atas, Bukan Pergi?

Margin Negatif dalam CSS: Membongkar Misteri

Kedudukan menegak dalam CSS selalunya melibatkan penggunaan margin negatif, menimbulkan persoalan tentang penampilan mereka dan kefungsian. Bagaimanakah margin negatif berfungsi, dan mengapa ia berkelakuan berbeza daripada margin positif?

Memahami Margin Negatif

Margin negatif mengurangkan saiz kotak margin, yang melampirkan kandungan dan kotak padding. Contohnya, atas margin negatif menolak elemen ke atas, mengecilkan ruang di atasnya. Walau bagaimanapun, ini tidak menjejaskan kandungan atau kotak padding.

Perwakilan Visual

Tidak seperti jidar positif, jidar negatif tidak kelihatan sebagai sebahagian daripada sempadan elemen. Sebaliknya, mereka secara berkesan "menaikkan" elemen dengan mengurangkan ruang di sekelilingnya. Bayangkan blok dengan margin atas negatif; kandungan dan pelapik dalam elemen kekal tidak berubah, tetapi ruang antara tepi atas elemen dan kawasan sekeliling dikurangkan.

Margin-Top vs. Margin-Bottom

Margin-top:-8px dan margin-bottom:8px tidak bersamaan. Margin-atas menolak elemen ke atas sebanyak 8px, manakala margin-bawah menolaknya ke bawah sebanyak 8px. Perbezaan ini disebabkan oleh "keruntuhan" margin. Jidar bersebelahan daripada jenis yang sama (mis., jidar atas dan bawah) runtuh, bermakna nilai margin yang lebih besar diutamakan dan berkesan menggantikan yang lebih kecil. Oleh itu, margin-atas:-8px dan margin-bottom:8px akan menafikan satu sama lain, menyebabkan tiada pergerakan menegak.

Gerakan di Sebalik Jidar Negatif

Jing negatif membolehkan kedudukan tepat elemen tanpa menjejaskan kandungan atau paddingnya. Contohnya, apabila memusatkan elemen secara menegak dengan CSS, menetapkan margin-top:-50% akan memusatkan elemen berbanding lebarnya. Walau bagaimanapun, ciri ini dalam pengiraan jidar CSS memerlukan penggunaan margin-top:-8px untuk memusatkan elemen secara menegak berbanding ketinggiannya.

Atas ialah kandungan terperinci Margin Negatif dalam CSS: Mengapa Mereka Menolak Elemen Ke Atas, Bukan Pergi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!