Saya tahu ini adalah masalah lama, saya sudah sering melihatnya. Masalahnya adalah bahwa semua perbaikan di sini adalah peretasan yang berpotensi memiliki konsekuensi yang tidak diinginkan.
Pertama, ada penjelasan mudah untuk masalah root. Karena cara runtuh margin bekerja, jika elemen pertama di dalam wadah memiliki margin atas, margin atas itu secara efektif diterapkan pada wadah induk itu sendiri. Anda dapat menguji ini sendiri dengan melakukan hal berikut:
<div>
<h1>Test</h1>
</div>
Dalam debugger, buka ini dan arahkan div. Anda akan melihat bahwa div itu sendiri sebenarnya ditempatkan di mana margin atas elemen H1 berhenti . Perilaku ini dimaksudkan oleh browser.
Jadi ada perbaikan yang mudah untuk ini tanpa harus menggunakan peretasan aneh, seperti sebagian besar posting di sini (tidak ada penghinaan yang dimaksudkan, itu hanya kebenaran) - cukup kembali ke penjelasan asli - ...if the first element inside a container has a top margin...
- Setelah itu, Anda perlu elemen pertama dalam sebuah wadah yang TIDAK memiliki margin atas. Oke, tapi bagaimana Anda melakukannya tanpa menambahkan elemen yang tidak mengganggu dokumen Anda secara semantik?
Mudah! Elemen semu! Anda bisa melakukan ini melalui kelas atau mixin yang telah ditentukan. Tambahkan :before
elemen pseudo:
CSS melalui kelas:
.top-margin-fix:before {
content: ' ';
display: block;
width: 100%;
height: .0000001em;
}
Dengan ini, mengikuti contoh markup di atas Anda akan memodifikasi div Anda seperti itu:
<div class="top-margin-fix">
<h1>Test</h1>
</div>
Mengapa ini bekerja?
Elemen pertama dalam sebuah wadah, jika tidak memiliki margin atas, menetapkan posisi awal dari margin atas elemen berikutnya. Dengan menambahkan :before
elemen pseudo, browser sebenarnya menambahkan elemen non-semantik (dengan kata lain, bagus untuk SEO) ke dalam wadah induk sebelum elemen pertama Anda.
Q. Mengapa tingginya: .0000001em?
A. Dibutuhkan ketinggian untuk browser untuk mendorong elemen margin ke bawah. Ketinggian ini secara efektif nol, tetapi masih memungkinkan Anda untuk menambahkan padding ke wadah induk itu sendiri. Karena secara efektif nol, tidak akan berpengaruh pada tata letak wadah. Cantik.
Sekarang Anda dapat menambahkan kelas (atau lebih baik, di SASS / KURANG, mixin!) Untuk memperbaiki masalah ini alih-alih menambahkan gaya tampilan aneh yang akan menyebabkan konsekuensi yang tak terduga ketika Anda ingin melakukan hal-hal lain dengan elemen Anda, dengan sengaja menghilangkan margin pada elemen dan / atau menggantinya dengan padding, atau posisi aneh / gaya mengambang yang benar-benar tidak dimaksudkan untuk menyelesaikan masalah ini.
overflow:hidden
lebih baik untuk 90% kasus.