Mengapakah Margin Atas pada Elemen Kanak-kanak Menolak Div ​​Induknya?

Margin-Top Menolak Div ​​Induk Ke Bawah: Memahami dan Menyelesaikan Isu

Ramai pembangun menghadapi isu pelik apabila menggunakan margin atas pada elemen pertama yang kelihatan pada halaman: ia menyebabkan div induk ditolak ke bawah. Untuk menyelidiki punca tingkah laku ini dan menyediakan penyelesaian, mari kita analisa coretan kod yang disediakan:

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;
}

Kod ini mentakrifkan div pengepala dengan elemen h1 bersarang yang mengandungi jidar 50px. Biasanya, kami menjangkakan margin ini untuk meningkatkan ruang antara h1 dan tepi atas div pengepala. Walau bagaimanapun, ia sebaliknya menyebabkan keseluruhan div pengepala ditolak ke bawah sebanyak 50px.

Untuk memahami sebab происходит ini, kita perlu mempertimbangkan "konteks pemformatan blok". Apabila digunakan pada elemen pertama yang boleh dilihat pada halaman, jidar atas menetapkan semula konteks pemformatan blok, menyebabkan div induk ditarik ke bawah.

Penyelesaian kepada isu ini ialah menggunakan limpahan: auto pada div induk . Ini membolehkan div induk melaraskan ketinggiannya secara automatik untuk menampung elemen anak-anaknya, termasuk h1 dengan jidar atas:

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

Dengan menambahkan limpahan: auto, kami membenarkan div pengepala mengubah saiz secara menegak, menghalangnya daripada ditolak ke bawah apabila jidar atas ditambahkan pada elemen h1.

Atas ialah kandungan terperinci Mengapakah Margin Atas pada Elemen Kanak-kanak Menolak Div ​​Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!