Сведения о вопросе

Ислам

00:49, 2nd August, 2020

Теги

HTML    

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

Просмотров: 293   Ответов: 4

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

Столкнулся с проблемой
&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


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



  Сведения об ответе

padenie

02:13, 18th August, 2020

Отступы схлопываются, это нормально. Решения:
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;
}


  Сведения об ответе

DINO

06:10, 17th August, 2020

  Сведения об ответе

dumai

12:08, 4th August, 2020

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


  Сведения об ответе

davran

20:54, 5th August, 2020

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


Ответить на вопрос

Чтобы ответить на вопрос вам нужно войти в систему или зарегистрироваться