Mengapakah `margin-top: -8px` Beranjak Ke Atas Manakala `margin-bottom: 8px` Beranjak Ke Bawah?

Cara Negatif CSS Margin Berfungsi dan Perbezaan Antara Atas dan Bawah Margin

Dalam CSS, margin negatif digunakan untuk mencipta kesan visual dengan mengubah kedudukan unsur. Apabila digunakan pada jidar atas, nilai negatif mencipta anjakan ke atas, manakala jidar bawah negatif menolak unsur ke bawah.

Pertimbangkan contoh:

.item {
    position:absolute;
    top:50%;
    margin-top:-8px; /* half of height */
    height: 16px;
}

Di sini, nilai margin atas negatif bagi -8px menganjakkan elemen ke atas separuh ketinggiannya. Ini dicapai dengan memanjangkan kotak jidar (jarak tidak kelihatan mengelilingi elemen) di atas tepi kotak kandungan (kawasan kelihatan).

Mengapa margin-atas:-8px ≠ margin-bawah:8px?

Walaupun kelihatan serupa, margin-atas:-8px dan margin-bottom:8px berbeza dalam kesannya. Semasa yang pertama mengalihkan elemen ke atas, yang terakhir menolaknya ke bawah. Perbezaan ini timbul daripada lokasi titik penambat untuk jidar.

Dalam CSS, semua jidar dilabuhkan pada tepi kotak sempadan blok yang mengandungi. Untuk elemen diposisikan, blok yang mengandungi ialah induk elemen. Apabila menggunakan margin-top, titik sauh berada di tepi atas kotak sempadan induk. Oleh itu, nilai negatif menggerakkan elemen di atas titik ini.

Sebaliknya, margin-bawah menambat elemen di tepi bawah blok yang mengandungi. Akibatnya, jidar bawah negatif menggerakkan elemen ke bawah dan bukannya menolaknya ke atas.

Pemahaman Intuitif

Jing atas negatif mengurangkan ketinggian kotak jidar dengan berkesan, mewujudkan ilusi bahawa unsur itu telah bergerak ke atas. Jidar bawah negatif, sebaliknya, meningkatkan ketinggian kotak jidar, menjadikannya kelihatan seolah-olah elemen telah beralih ke bawah.

Atas ialah kandungan terperinci Mengapakah `margin-top: -8px` Beranjak Ke Atas Manakala `margin-bottom: 8px` Beranjak Ke Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!