Mengapa Margin-Top Tolak Ke Bawah Div Induk, dan Bagaimana Saya Boleh Membetulkannya Tanpa Menggunakan Sempadan?

Cara Membetulkan Div Induk Menolak Margin-atas Ke Bawah Tanpa Sempadan

Apabila elemen anak dengan margin-atas terletak di dalam elemen induk tanpa sempadan atas, margin boleh menolak elemen induk ke bawah. Tingkah laku ini selalunya tidak diingini. Satu penyelesaian ialah menambah sempadan atas pada elemen induk, tetapi ini tidak selalunya boleh dilakukan atau diingini.

Penyelesaian alternatif ialah menggunakan limpahan: sifat auto pada elemen induk. Ini akan menghalang margin daripada runtuh dan menolak elemen induk ke bawah. Berikut ialah contoh:

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

.body .container {
    background-color: blue;
    height: 50px;
    width: 50%;
    margin-top: 30px;
}

Dengan perubahan ini, div oren tidak lagi akan menolak div hijau ke bawah.

Atas ialah kandungan terperinci Mengapa Margin-Top Tolak Ke Bawah Div Induk, dan Bagaimana Saya Boleh Membetulkannya Tanpa Menggunakan Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!