Mengapakah Margin Teratas Elemen Kanak-kanak Melangkaui Ibu Bapa Tanpa Sempadan?

Lekukan Margin-atas Apabila Elemen Induk Kekurangan Sempadan

Apabila menghadapi senario di mana elemen dengan jidar atas melangkaui sempadan unsur induknya, yang tidak mempunyai sempadan atas, ia boleh membingungkan. Lekukan ini boleh menyebabkan jarak yang tidak diingini dalam reka letak.

Dalam contoh khusus ini, div oren bersarang dalam div hijau yang tidak mempunyai sempadan atas. Walaupun mempunyai jidar atas 30px, div oren menonjol di bawah induknya.

Untuk menangani isu ini, satu penyelesaian yang mungkin adalah dengan memperkenalkan sempadan atas kepada div hijau. Walau bagaimanapun, ini mungkin tidak boleh dilaksanakan jika tepi atas tanpa sempadan merupakan keperluan reka bentuk.

Pendekatan alternatif melibatkan penggunaan "overflow: auto" pada div hijau (.body). Teknik ini menghalang keruntuhan jidar antara elemen, dengan berkesan mengandungi div oren dalam sempadan induknya.

Coretan kod CSS di bawah menunjukkan pelaksanaan penyelesaian ini:

.body {
    border: 1px solid black;
    border-top: none;
    border-bottom: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    overflow: auto;
}

Dengan menggunakan ini betulkan, div oren tidak lagi akan mengenden di luar div hijau, membenarkan susun atur untuk mengekalkan yang dimaksudkan jarak.

Atas ialah kandungan terperinci Mengapakah Margin Teratas Elemen Kanak-kanak Melangkaui Ibu Bapa Tanpa Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!