Margin-Top mendorong div luar ke bawah

Saya memiliki header div sebagai elemen pertama di wrapper div saya, tetapi ketika saya menambahkan margin atas ke h1 di dalam header header itu mendorong seluruh header header ke bawah. Saya menyadari ini terjadi setiap kali saya menerapkan margin atas ke elemen pertama yang terlihat pada halaman.

Berikut ini cuplikan kode sampel. Terima kasih!

div#header{
	width: 100%;
	background-color: #eee;
	position: relative;
}

div#header h1{
	text-align: center;
	width: 375px;
	height: 50px;
	margin: 50px auto;
	font-size: 220%;
	background: url('../../images/name_logo.png') no-repeat;
}

<div id="header">
	<h1>Title</h1>
	<ul id="navbar"></ul>
</div>

taruh overflow:autodi induk div
lihat lebih banyak di tautan ini

Saya tidak memiliki penjelasan yang solid pada mengapa hal ini terjadi, tapi aku sudah tetap ini dengan mengubah top-marginke top-padding, atau menambahkan display: inline-blockdengan gaya elemen.

EDIT: Ini teoriku

Saya punya perasaan itu ada hubungannya dengan bagaimana margin diciutkan (digabungkan).

dari W3C Collapsing Margins :

Dalam spesifikasi ini, ungkapan collapsing margin berarti bahwa margin yang berdampingan (tidak ada konten yang tidak kosong, padding atau area perbatasan memisahkan mereka) dari dua kotak atau lebih (yang mungkin bersebelahan atau bersarang) bergabung untuk membentuk margin tunggal .

Teori saya adalah bahwa sejak elemen pertama Anda berada di sebelah tubuh, dua margin digabungkan dan diterapkan ke tubuh: ini memaksa konten tubuh untuk mulai di bawah margin yang diterapkan, sesuai dengan model kotak .

Ada situasi di mana margin tidak runtuh yang mungkin layak untuk dimainkan (dari Collapsing Margins ):

* floated elements
* absolutely positioned elements
* inline-block elements
* elements with overflow set to anything other than visible (They do not collapse margins with their children.)
* cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
* the root element

Ini adalah beberapa cara untuk menghindari runtuhnya margin antara elemen orangtua-anak. Gunakan yang sesuai dengan gaya Anda:

• Setel displayke selain block.
• Setel floatke selain none.
• Hapus margin, dan gunakan saja padding. Misalnya jika sudah margin-top: 10px, ganti dengan padding-top: 10px;.
• Hapus margin, dan menggunakan bukan position( absoluteatau relative) dengan atribut top, bottomdll Sebagai contoh jika Anda memiliki margin-top: 10px, ganti dengan position: relative; top: 10px;.
• Tambahkan a paddingatau a borderdi sisi di mana margin runtuh, ke elemen induk . Perbatasan dapat 1px dan transparan.
• Tetapkan overflowke selain visibleke elemen induk .

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 :beforeelemen 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 :beforeelemen 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.

display: flexakan bekerja dalam hal ini. Berikan elemen induk display: flex;dan berikan margin sesuai kebutuhan Anda pada h1tag.

Jalankan masalah ini hari ini.

overflow: hidden tidak berfungsi seperti yang diharapkan ketika saya memiliki lebih banyak elemen yang diikuti.

Jadi saya mencoba mengubah properti tampilan div induk dan display: flexbekerja !!!

Semoga ini bisa membantu seseorang. :)

Menambahkan sedikit padding ke atas elemen induk dapat memperbaiki masalah ini.

.parent{
  padding-top: 0.01em;
}

Ini berguna jika Anda membutuhkan elemen di dalam induk agar terlihat di luar elemen induk, seperti jika Anda membuat efek yang tumpang tindih.

Ini terjadi karena margin collapse. Ketika elemen anak menyentuh batas elemen induk dan salah satunya diterapkan dengan margin, maka:

1. Margin yang terbesar akan menang (diterapkan).

2. jika ada dari mereka yang memiliki margin maka keduanya akan berbagi sama.

Solusi

1. berlaku perbatasan ke orangtua yang membuat orangtua dan anak terpisah.
2. oleskan padding ke induk yang membuat induk dan anak terpisah.
3. terapkan overflow daripada terlihat pada induknya.
4. gunakan sebelum atau sesudah untuk membuat elemen virtual di div induk yang dapat berbeda margin diterapkan anak dan orangtua.
5. membuat satu elemen html antara margin yang diterapkan anak dan orang tua juga dapat memisahkan mereka.