Margin Meruntuhkan dalam CSS: Panduan Pemula-tutorial css-php.cn

Margin Meruntuhkan dalam CSS: Panduan Pemula

Barbara Streisand

Lepaskan： 2024-09-24 18:16:02

asal

922 orang telah melayarinya

Collapsing Margins in CSS: A Beginner

pengenalan

Tiada yang lebih mengecewakan daripada menerapkan gaya dan tidak berfungsi seperti yang diharapkan. Margin Runtuh ialah satu fenomena yang menyebabkan hasil penggayaan yang tidak dijangka. Oleh itu, apakah margin runtuh dan bagaimana ia mempengaruhi margin dalam CSS?

Margin Runtuh

Jing yang runtuh berpunca daripada jidar sifat CSS, yang mengawal jarak di luar elemen. Seperti namanya, jidar runtuh berlaku apabila jidar unsur bersebelahan bergabung atau 'runtuh' menjadi satu, bukannya menjumlahkan. Ini biasanya berlaku antara unsur adik beradik atau antara unsur ibu bapa dan anak. Contohnya, jika dua elemen adik-beradik mempunyai jidar—satu dengan jidar 20px bawah dan satu lagi dengan jidar atas 30px—anda mungkin menjangkakan jumlah jidar ialah 50px. Walau bagaimanapun, disebabkan jidar runtuh, hanya jidar 30px yang lebih besar akan digunakan dan jidar 20px yang lebih kecil akan diruntuhkan.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}

Salin selepas log masuk

Selain itu, dalam kes di mana unsur induk tidak mempunyai pelapik atau jidar, dan unsur anaknya mempunyai jidar atas, jidar mungkin "runtuh" melebihi induk, sekali gus menjejaskan peletakan ibu bapa.

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

Salin selepas log masuk

Bidar atas 20px daripada .child mungkin runtuh di luar .parent, menurunkan keseluruhan induk sebanyak 20px.

Ini boleh mengelirukan pembangun noob (saya tidak pernah tahu mengenainya sehingga baru-baru ini), kerana jarak yang terhasil mungkin tidak sepadan dengan jangkaan mereka.

Cara untuk mengatasinya

Tambah Padding atau Border: menambahkan sedikit padding atau sempadan pada elemen induk akan menghalang keruntuhan margin.

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

Salin selepas log masuk

Penggunaan sifat limpahan: Apabila sifat limpahan induk ditetapkan kepada apa-apa selain daripada yang boleh dilihat (cth., limpahan: tersembunyi;), ia boleh mengelakkan keruntuhan margin.

.parent {
    overflow: hidden;
}

Salin selepas log masuk

Gunakan Flexbox atau Layout Grid: Kaedah reka letak ini mengelakkan isu keruntuhan margin mengikut reka bentuk.

Contoh Flexbox:

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

Salin selepas log masuk

Contoh Grid

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

Salin selepas log masuk

Gunakan Float atau Inline-Block: Mengapungkan elemen kanak-kanak atau menetapkannya untuk dipaparkan: inline-block; juga akan menghalang margin daripada runtuh. Walau bagaimanapun, saya jarang melihat terapung lagi tetapi adalah baik untuk mengetahui sekiranya terdapat asas kod warisan.

Contoh apungan:

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

Salin selepas log masuk

Contoh blok sebaris

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

Salin selepas log masuk