Mengapa Pengepala Tetap Saya Nampak Mempunyai Margin Teratas Tambahan?

Mengapakah pengepala saya bergerak ke bawah apabila saya menetapkannya?

Dalam Codepen anda, anda menetapkan pengepala untuk dibetulkan, yang bermaksud bahawa ia akan kekal dalam kedudukan yang sama semasa menatal ke bawah. Walau bagaimanapun, apabila anda berbuat demikian, margin di bahagian atas pengepala nampaknya meningkat. Ini disebabkan oleh margin runtuh.

Apakah Margin Runtuh?

Margin Runtuh ialah gelagat CSS yang meruntuhkan jidar elemen peringkat blok bersebelahan, seperti anda pengepala dan borang di bawahnya. Apabila pengepala menjadi tetap, ia dialih keluar daripada aliran dokumen dan borang menjadi elemen aliran masuk pertama. Ini menyebabkan jidar atas borang runtuh dengan jidar atas badan, mengakibatkan penampilan jidar yang lebih besar.

Cara Membetulkan

Dua cara biasa untuk menangani isu ini ialah dengan melumpuhkan margin runtuh atau menetapkan nilai margin atas kepada elemen yang memerlukannya.

Melumpuhkan Margin Runtuh

Untuk melumpuhkan keruntuhan jidar, tambahkan peraturan CSS 1px atas padding pada elemen badan. Ini memaksa penyemak imbas untuk mengekalkan jidar atas badan.

body {
  padding-top: 1px; /* Disable margin-collapsing */
}

Menetapkan Nilai Margin Teratas

Sebagai alternatif, tambahkan jidar atas pada pengepala. Ini akan menetapkan jarak antara pengepala dan bahagian atas port pandangan:

#header {
  margin-top: 2rem;
}

Atas ialah kandungan terperinci Mengapa Pengepala Tetap Saya Nampak Mempunyai Margin Teratas Tambahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!