Mengapa Menambah Margin Atas pada Pengepala Menolak Keseluruhan Pengepala Ke Bawah?

Isu Margin-Top dalam Elemen Pengepala

Apabila menambahkan margin atas pada div pengepala, mengapakah keseluruhan div pengepala ditolak ke bawah?

Tingkah laku ini berlaku kerana jidar atas yang digunakan pada elemen pertama yang boleh dilihat dalam bekas sering menyebabkan ia melampaui ruang tersedia elemen induknya. Akibatnya, elemen induk mengembang secara menegak untuk menampung ruang margin, menolak semua elemen berikutnya ke bawah.

Contoh Coretan Kod:

div#header {
  width: 100%;
  background-color: #eee;
  position: relative;
}

div#header h1 {
  text-align: center;
  width: 375px;
  height: 50px;
  margin: 50px auto;
  font-size: 220%;
  background: url('../../images/name_logo.png') no-repeat;
}

Penyelesaian :

Untuk menyelesaikan isu ini, anda boleh menambah limpahan:auto harta kepada div induk. Ini akan menyebabkan div induk menatal apabila margin melangkaui ruang yang tersedia, mengekalkan div pengepala daripada beralih ke bawah.

div#header {
  overflow: auto;
  ...
}

Untuk butiran lanjut, rujuk pautan berikut:

Atas ialah kandungan terperinci Mengapa Menambah Margin Atas pada Pengepala Menolak Keseluruhan Pengepala Ke Bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!