Apakah ada cara untuk menonaktifkan margin-collapsing sama sekali? Satu-satunya solusi yang saya temukan (dengan nama "uncollapsing") memerlukan menggunakan perbatasan 1px atau padding 1px. Saya menemukan ini tidak dapat diterima: piksel asing mempersulit perhitungan tanpa alasan yang baik. Apakah ada cara yang lebih masuk akal untuk menonaktifkan margin-collapsing ini?
202
margin-bottom
tetapi biarkanmargin-top
sebagai 0.Jawaban:
Ada dua jenis utama keruntuhan margin:
Menggunakan bantalan atau batas akan mencegah keruntuhan hanya dalam kasus terakhir. Selain itu, nilai apa pun yang
overflow
berbeda dari default (visible
) yang diterapkan pada induk akan mencegah keruntuhan. Dengan demikian, keduanyaoverflow: auto
danoverflow: hidden
akan memiliki efek yang sama. Mungkin satu-satunya perbedaan saat menggunakanhidden
adalah konsekuensi yang tidak disengaja dari menyembunyikan konten jika orang tua memiliki ketinggian tetap.Properti lain yang, setelah diterapkan pada induknya, dapat membantu memperbaiki perilaku ini adalah:
float: left / right
position: absolute
display: inline-block / flex
Anda dapat menguji semuanya di sini: http://jsfiddle.net/XB9wX/1/ .
Saya harus menambahkan bahwa, seperti biasa, Internet Explorer adalah pengecualian. Lebih khusus lagi, di IE 7 margin tidak runtuh ketika beberapa jenis tata letak ditentukan untuk elemen induk, seperti
width
.Sumber: Artikel Sitepoint, Runtuh Marjin
sumber
overflow: auto
dapat menyebabkan bilah gulir muncul di elemen induk, daripada membiarkan konten melimpah melimpah sesuaioverflow: visible
.flex
berbeda dari standarnya juga akan menonaktifkan runtuhnya marginAnda juga dapat menggunakan perbaikan mikro lama yang baik untuk ini.
Lihat biola diperbarui: http://jsfiddle.net/XB9wX/97/
sumber
:before
dan:after
elemen. Saya sekarang telah menambahkan aturan ini ke stylesheet saya:div:before, div:after{content: ' '; display: table;}
. Fantastis. Tiba-tiba hal-hal mulai berlaku seperti yang diharapkan.Salah satu trik rapi untuk menonaktifkan collapsing margin yang tidak memiliki dampak visual, sejauh yang saya tahu, adalah mengatur bantalan induk ke
0.05px
:Padding tidak lagi 0 sehingga collapsing tidak akan terjadi lagi tetapi pada saat yang sama padding cukup kecil sehingga secara visual akan dibulatkan menjadi 0.
Jika beberapa bantalan lain diinginkan, maka gunakan bantalan hanya ke "arah" di mana margin runtuh tidak diinginkan, misalnya
padding-top: 0.05px;
.Contoh kerja:
Edit: mengubah nilai dari
0.1
menjadi0.05
. Seperti yang disebutkan oleh Chris Morgan dalam komentar di bawah, dan dari pengujian kecil ini , tampaknya memang Firefox yang mempertimbangkan0.1px
padding. Padahal,0.05px
sepertinya melakukan trik.sumber
*{padding-top:0.1px}
. Apakah kami yakin ini berfungsi di semua browser?0.05px
sepertinya masih seperti pilihan tertentu, bukan nomor tipuan browser acak, saya lebih suka0.01px
.overflow:hidden
mencegah margin yang runtuh tetapi tidak bebas dari efek samping - yaitu ... menyembunyikan overflow.Terlepas dari bentuk ini dan apa yang Anda sebutkan, Anda hanya perlu belajar hidup dengannya dan belajar untuk hari ini ketika mereka benar-benar berguna (datang setiap 3 hingga 5 tahun).
sumber
overflow: auto
baik untuk digunakan untuk mencegah overflow tersembunyi dan masih mencegah margin yang runtuh.overflow:auto;
membuat area konten saya memperoleh bilah gulir di beberapa halaman.Sebenarnya, ada satu yang bekerja dengan sempurna:
display: flex; arah fleksibel: kolom;
sumber
<div>
di dalam.container
, jika tidak,.container
akan mengendalikan model kotak anak-anaknya. Misalnya, elemen sebaris akan menjadi elemen blok dengan lebar penuh; jika mereka memiliki margin, itu juga akan runtuh.Setiap browser berbasis webkit harus mendukung properti
-webkit-margin-collapse
. Ada juga subproperti yang hanya mengaturnya untuk margin atas atau bawah. Anda bisa memberikannya nilai runtuh (default), buang (set margin ke 0 jika ada margin tetangga), dan pisahkan (mencegah runtuhnya margin).Saya telah menguji bahwa ini berfungsi pada Chrome dan Safari versi 2014. Sayangnya, saya tidak berpikir ini akan didukung di IE karena tidak didasarkan pada webkit.
Baca Referensi CSS Safari Apple untuk penjelasan lengkap.
Jika Anda memeriksa halaman ekstensi webkit Mozilla CSS , mereka mencantumkan properti ini sebagai milik dan merekomendasikan untuk tidak menggunakannya. Ini karena mereka kemungkinan tidak akan masuk ke CSS standar dalam waktu dekat dan hanya browser berbasis webkit yang akan mendukungnya.
sumber
Saya tahu bahwa ini adalah posting yang sangat lama tetapi hanya ingin mengatakan bahwa menggunakan flexbox pada elemen induk akan menonaktifkan margin collapsing untuk elemen turunannya.
sumber
Saya memiliki masalah yang sama dengan runtuhnya margin karena orang tua telah
position
menetapkan ke relatif. Berikut adalah daftar perintah yang dapat Anda gunakan untuk menonaktifkan margin collapsing.DI SINI ADALAH PEMAIN UNTUK UJI
Hanya mencoba untuk menetapkan setiap
parent-fix*
kelas untukdiv.container
elemen, atau kelas apa punchildren-fix*
untukdiv.margin
. Pilih salah satu yang paling sesuai dengan kebutuhan Anda.Kapan
div.absolute
dengan latar belakang merah akan diposisikan di bagian paling atas halaman.div.absolute
akan diposisikan pada koordinat Y yang sama dengandiv.margin
Berikut adalah jsFiddle dengan contoh yang dapat Anda edit
sumber
Di browser yang lebih baru (tidak termasuk IE11), solusi sederhana untuk mencegah runtuhnya margin orangtua-anak adalah dengan menggunakannya
display: flow-root
. Namun, Anda masih membutuhkan teknik lain untuk mencegah runtuhnya elemen yang berdekatan.DEMO (sebelumnya)
DEMO (setelah)
sumber
Untuk informasi Anda, Anda dapat menggunakan kotak tetapi dengan efek samping :)
sumber