Margin pada elemen anak memindahkan elemen induk

Saya memiliki div( orang tua ) yang berisi div( anak ) lain. Induk adalah elemen pertama bodytanpa gaya CSS tertentu. Ketika saya mengatur

.child
{
    margin-top: 10px;
}

Hasil akhirnya adalah bahwa bagian atas anak saya masih sejajar dengan orang tua. Alih-alih digeser anak untuk 10px ke bawah, orang tua saya bergerak 10px ke bawah.

Saya DOCTYPEdiatur ke XHTML Transitional.

Apa yang kulewatkan di sini?

sunting 1
Orang tua saya perlu memiliki dimensi yang ditentukan secara ketat karena memiliki latar belakang yang harus ditampilkan di bawahnya dari atas ke bawah (pixel perfect). Jadi pengaturan margin vertikal di atasnya adalah jalan .

sunting 2
Perilaku ini sama pada FF, IE dan juga CR.

Menemukan alternatif di elemen Anak dengan margin dalam DIVs Anda juga dapat menambahkan:

.parent { overflow: auto; }

atau:

.parent { overflow: hidden; }

Ini mencegah margin untuk runtuh . Perbatasan dan bantalan melakukan hal yang sama. Karenanya, Anda juga dapat menggunakan yang berikut untuk mencegah keruntuhan margin atas:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Perbarui dengan permintaan populer: Inti dari margin yang runtuh adalah menangani konten tekstual. Sebagai contoh:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

Karena browser menciutkan margin, teks akan muncul seperti yang Anda harapkan, dan <div>tag pembungkus tidak memengaruhi margin. Setiap elemen memastikan ada spasi di sekitarnya, tetapi spasi tidak akan digandakan. Margin <h2>dan <p>tidak akan menjumlahkan, tetapi geser satu sama lain (mereka runtuh). Hal yang sama terjadi pada elemen <p>dan <ul>.

Sayangnya, dengan desain modern, ide ini dapat menggigit Anda ketika Anda secara eksplisit menginginkan sebuah wadah. Ini disebut konteks pemformatan blok baru di CSS. The overflowatau marjin trik akan memberikan itu.

Ini adalah perilaku normal (setidaknya di antara implementasi browser). Margin tidak mempengaruhi posisi anak dalam kaitannya dengan induknya, kecuali jika induknya memiliki padding, dalam hal ini sebagian besar browser kemudian akan menambahkan margin anak ke padding orangtua.

Untuk mendapatkan perilaku yang Anda inginkan, Anda perlu:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Meskipun semua jawaban memperbaiki masalah tetapi mereka datang dengan trade-off / penyesuaian / kompromi seperti

• floats, Anda harus mengapung elemen
• border-top, Ini mendorong induk setidaknya 1px ke bawah yang kemudian harus disesuaikan dengan memperkenalkan -1pxmargin ke elemen induk itu sendiri. Ini dapat membuat masalah ketika orang tua sudah memiliki margin-topunit relatif.
• padding-top, efek yang sama seperti menggunakan border-top
• overflow: hidden, Tidak dapat digunakan ketika orang tua harus menampilkan konten yang meluap, seperti menu drop down
• overflow: auto, Memperkenalkan bilah gulir untuk elemen induk yang (secara sengaja) meluap konten (seperti bayangan atau segitiga ujung pahat)

Masalah ini dapat diatasi dengan menggunakan elemen pseudo CSS3 sebagai berikut

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

tambahkan gaya display:inline-blockke elemen anak

elemen induk tidak boleh kosong setidaknya diletakkan  sebelum elemen anak.

Inilah yang bekerja untuk saya

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Saya menemukan itu, di dalam .css Anda> jika Anda mengatur properti tampilan elemen div ke inline-block itu memperbaiki masalah. dan margin akan berfungsi seperti yang diharapkan.

Solusi khusus CSS yang rapi

Gunakan kode berikut untuk menambahkan anak pertama tanpa konten ke div bergerak yang tidak disengaja:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Keuntungan dari metode ini adalah Anda tidak perlu mengubah CSS elemen apa pun yang ada, dan karena itu memiliki dampak minimal pada desain. Di sebelah ini, elemen yang ditambahkan adalah elemen pseudo, yang tidak ada di pohon DOM.

Dukungan untuk elemen semu tersebar luas: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+, dan IE 8+. Ini akan berfungsi di browser modern apa pun (hati-hati dengan yang lebih baru ::before, yang tidak didukung di IE8).

Konteks

Jika anak pertama dari suatu elemen memiliki margin-top, orang tua akan menyesuaikan posisinya sebagai cara meruntuhkan margin yang berlebihan. Mengapa? Seperti itu saja.

Diberikan masalah berikut:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

Anda dapat memperbaikinya dengan menambahkan anak dengan konten, seperti ruang sederhana. Tapi kita semua benci menambahkan ruang untuk apa yang hanya masalah desain. Karena itu, gunakan white-spaceproperti untuk konten palsu.

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Di mana position: relative;memastikan posisi perbaikan yang benar. Dan white-space: pre;membuat Anda tidak perlu menambahkan konten apa pun - seperti ruang kosong - untuk memperbaikinya. Dan height: 0px;width: 0px;overflow: hidden;pastikan Anda tidak akan pernah melihat perbaikannya.

Anda mungkin perlu menambah line-height: 0px;atau max-height: 0px;memastikan ketinggian sebenarnya nol di browser IE kuno (saya tidak yakin). Dan opsional Anda bisa menambahkannya <!--dummy-->di browser IE lama, jika tidak berfungsi.

Singkatnya, Anda dapat melakukan semua ini hanya dengan CSS (yang menghilangkan kebutuhan untuk menambahkan anak yang sebenarnya ke pohon HTML DOM):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Untuk mencegah "Div parent" gunakan margin "div child":
Pada parent gunakan css ini:

• Mengapung
• Lapisan
• Berbatasan
• Meluap

The marginunsur yang terkandung dalam .childruntuh.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

Dalam contoh ini, pmenerima margindari gaya default browser. Default browser font-sizebiasanya 16px. Dengan memiliki margin-toplebih dari 16px pada #childAnda mulai memperhatikan posisi itu bergerak.

Saya punya masalah ini juga tetapi lebih suka untuk mencegah hacks margin negatif, jadi saya meletakkan

<div class="supercontainer"></div>

di sekelilingnya semua yang memiliki bantalan bukan margin. Tentu saja ini berarti lebih banyak divitis tetapi mungkin cara paling bersih untuk menyelesaikannya dengan benar.

Menariknya solusi favorit saya untuk masalah ini belum disebutkan di sini: menggunakan pelampung.

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

lihat di sini: http://codepen.io/anon/pen/Iphol

Perhatikan bahwa jika Anda memerlukan tinggi dinamis pada induk, ia juga harus mengambang, jadi cukup ganti height:100px;denganfloat:left;

Solusi alternatif yang saya temukan sebelum saya tahu jawaban yang benar adalah menambahkan perbatasan transparan ke elemen induk.

Kotak Anda akan menggunakan piksel tambahan ...

.parent {
    border:1px solid transparent;
}

Menggunakan topalih-alih margin-topadalah solusi lain yang mungkin, jika perlu.