Ada dua jenis utama dari margin runtuh:

• Runtuh margin antara unsur-unsur yang berdekatan
• Runtuh margin antara orang tua dan anak-unsur

Menggunakan bantalan atau perbatasan akan mencegah runtuh hanya dalam kasus terakhir. Juga, setiap nilai overflow yang berbeda dari default (terlihat) diterapkan untuk orang tua akan mencegah keruntuhan. Dengan demikian, kedua overflow: auto dan overflow: hidden akan memiliki efek yang sama. Mungkin satu-satunya perbedaan ketika menggunakan tersembunyi adalah konsekuensi yang tidak diinginkan dari menyembunyikan konten jika orang tua memiliki ketinggian yang tetap.

Sifat-sifat lainnya yang, sekali diterapkan untuk orang tua, dapat membantu memperbaiki perilaku ini adalah:

• float: kiri / kanan
• position: absolute
• display: inline-block

Anda dapat menguji semua dari mereka di sini:

Saya harus menambahkan bahwa, seperti biasa, Internet Explorer adalah pengecualian. Lebih khusus lagi, di IE 7 margin tidak runtuh ketika beberapa jenis tata letak yang ditetapkan untuk elemen induk, seperti lebar.

Sumber: Sitepoint's artikel Runtuh Margin

Anda juga dapat menggunakan baik tua mikro clearfix untuk ini.

#container:before, #container:after{
    content: ' ';
    display: table;
}

Melihat diperbarui biola:

Salah satu trik jitu untuk menonaktifkan margin runtuh yang tidak memiliki dampak visual, sejauh yang saya tahu, adalah pengaturan padding dari orang tua untuk 0.05 px:

.parentClass {
    padding: 0.05px;
}

Padding tidak lagi 0, jadi runtuh won't terjadi lagi, tetapi pada saat yang sama padding yang cukup kecil bahwa visual itu akan putaran ke 0.

Jika beberapa lainnya padding yang diinginkan, kemudian menerapkan padding hanya untuk "arah" di mana margin runtuh tidak diinginkan, misalnya padding-top: 0.05 px;.

Contoh kerja:

.noCollapse { padding: 0.05 px; }

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

.children {
  margin-top: 50px;

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

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Edit: mengubah nilai dari 0.1 untuk 0.05. Sebagai Chris Morgan yang disebutkan di komentar di bawah, dan dari tes kecil ini, tampaknya memang Firefox mengambil 0.1 px padding menjadi pertimbangan. Meskipun, 0.05 px seemes untuk melakukan trik.

overflow:hidden mencegah runtuh margin tapi itu's tidak bebas dari efek samping - yaitu... menyembunyikan meluap.

Selain bentuk ini dan apa yang anda've disebutkan anda hanya harus belajar untuk hidup dengan itu dan belajar untuk hari ini ketika mereka benar-benar berguna (datang setiap 3 sampai 5 tahun).

Setiap browser berbasis webkit harus mendukung sifat -webkit-margin-runtuh. Ada juga subproperti hanya set untuk bagian atas atau bawah margin. Anda dapat memberikan nilai-nilai runtuh (default), membuang (set margin 0 jika ada tetangga margin), dan terpisah (mencegah margin runtuh).

I've diuji bahwa ini bekerja di 2014 versi Chrome dan Safari. Sayangnya, saya don't pikir ini akan didukung di IE karena itu's tidak berdasarkan webkit.

Baca Apple's Safari CSS Reference. untuk penjelasan lengkap.

Jika anda memeriksa Mozilla's CSS webkit ekstensi halaman, mereka daftar sifat-sifat ini sebagai milik dan merekomendasikan untuk tidak menggunakan mereka. Hal ini karena mereka're kemungkinan besar tidak akan masuk ke standar CSS dalam waktu dekat dan hanya berbasis webkit browser akan mendukung mereka.

Sebenarnya, ada satu yang bekerja sempurna:

tampilan: flex; flex-arah: kolom;

selama anda bisa hidup dengan pendukung hanya IE10 dan up

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Saya tahu bahwa ini adalah waktu yang sangat lama posting tapi hanya ingin mengatakan bahwa menggunakan flexbox pada sebuah elemen induk akan menonaktifkan margin runtuh untuk elemen anak.

Aku punya masalah yang sama dengan margin runtuh karena orang tua memiliki posisi set untuk kerabat. Berikut ini adalah daftar perintah-perintah yang dapat anda gunakan untuk menonaktifkan margin runtuh.

BERIKUT INI ADALAH BERMAIN ANAK UNTUK MENGUJI

Hanya mencoba untuk menetapkan setiap orang tua-fix* kelas div.wadah elemen, atau kelas anak-anak-fix* untuk div.margin. Memilih salah satu yang sesuai dengan kebutuhan anda yang terbaik.

Ketika

• margin pingsan adalah disabled, div.mutlak dengan latar belakang merah akan diposisikan di bagian paling atas dari halaman.
• margin runtuh div.mutlak akan diposisikan di tempat yang sama dengan koordinat Y sebagai div.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

Berikut ini adalah jsFiddle dengan contoh anda dapat mengedit

Untuk informasi anda, anda bisa menggunakan grid tetapi dengan efek samping :)

.parent {
  display: grid
}