Верстка. Margin-top вложенные дивы. Странный баг?

Question

[anonimizer_me]

Здравствуйте.

Столкнулся с проблемой

&lt;div id=&quot;d1&quot;&gt;<br/>
 &lt;div id=&quot;d2&quot;&gt;<br/>
ee<br/>
 &lt;/div&gt;<br/>
 &lt;/div&gt;<br/>

#d2{ margin-top:10px; }<br/>
<br/>

Почему-то смещается не d2 внутри d1, а d1 отъезжает сверху на 10px


В чем проблема?

Comments

[anonimizer_me]

доктайп HTML 4.01

Answer 1

[ID175055]

Отступы схлопываются, это нормально. Решения:
1)
#d2 {
margin-top: 10px;
display: inline-block; /* или inline, table, table-cell, etc */
}
2)
#d1 {
padding-top: 10px;
}
3)
#d2 {
margin-top: 10px;
position: absolute;
}

Comments

[CAH4A]

только у inline, table-cell, etc нет верхнего отступа. ))

Answer 2

[Константин Китманов]

www.complexspiral.com/publications/uncollapsing-margins/ оно?

Answer 3

[MT]

Это корректное схлопывание полей в соответствии со стандартом. Чтобы обойти это, можно, например, вместо margin у m2 использовать padding у m1.

Answer 4

[anonimizer_me]

Спасибо за ответы. Не знал о том, что бываю схлопывания.