Kongsi cara melumpuhkan lipatan jidar

Question

Adakah terdapat cara untuk melumpuhkan sepenuhnya lipatan margin? Satu-satunya penyelesaian yang saya temui (dinamakan "tidak runtuh") ialah menggunakan sempadan 1 piksel atau padding 1 piksel. Saya dapati ini tidak boleh diterima: piksel tambahan merumitkan pengiraan secara tidak perlu. Adakah terdapat cara yang lebih munasabah untuk melumpuhkan keruntuhan margin ini?

Answer 1

Tipuan kemas untuk melumpuhkan keruntuhan margin yang tidak mempunyai kesan visual, setakat yang saya tahu, adalah untuk menetapkan padding elemen induk kepada 0.05px:

.parentClass {
    padding: 0.05px;
}

Padding tidak lagi 0, jadi tiada keruntuhan berlaku, tetapi pada masa yang sama padding cukup kecil sehingga ia dibulatkan secara visual kepada 0.

Jika padding tambahan diperlukan, hanya gunakan padding dalam "direction" di mana anda tidak mahu margin collapse berlaku, seperti padding-top: 0.05px;.

Contoh kerja:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>边框折叠</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>无边框折叠</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

EDIT: Menukar nilai daripada 0.1 kepada 0.05. Seperti yang disebut oleh Chris Morgan dalam ulasan di bawah, dan daripada ujian kecil ini anda boleh dilihat bahawa Firefox mempertimbangkan pelapisan 0.1px. Walau bagaimanapun, 0.1更改为0.05。正如克里斯·摩根在下面的评论中提到的，并且从这个小测试中可以看出，似乎Firefox确实考虑了0.1px的内边距。不过，0.05px nampaknya berfungsi.

Answer 2

Terdapat dua jenis keruntuhan margin utama:

• Keruntuhan margin antara elemen bersebelahan
• Keruntuhan margin antara elemen induk dan elemen anak

Hanya dalam kes kedua, menggunakan padding atau sempadan akan menghalang lipatan. Selain itu, satu-satunya perbezaan apabila menggunakan apa-apa yang berbeza daripada nilai lalainya (visible）的overflow属性应用于父元素都会防止折叠。因此，overflow: auto和overflow: hidden将产生相同的效果。也许使用hidden) ialah kandungan akan disembunyikan secara tidak dijangka jika elemen induk mempunyai ketinggian tetap

Beberapa atribut lain yang boleh membantu membetulkan tingkah laku ini apabila digunakan pada elemen induk ialah:

• float: left / right
• position: absolute
• display: flex / grid

Anda boleh mengujinya di sini: http://jsfiddle.net/XB9wX/1/.

Saya harus menambah bahawa, seperti biasa, Internet Explorer adalah pengecualian. Khususnya, dalam IE 7, apabila susun atur tertentu (seperti width) ditentukan untuk elemen induk, jidar tidak runtuh.

Sumber: artikel Sitepoint Runtuhkan jidar