Почему margin-bottom показывает как margin-top?

Я пытаюсь добавить margin-bottom в div внутри родителя, но он отображается как родительский margin-top. Почему?

HTML:

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

CSS

#wrapper{
  border: 1px solid #F68004;
}

#content{
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
}

Что я ожидал:

Что я получаю:

Update:

Я могу это исправить, но я понятия не имею, почему этот код не работает? может кто-нибудь объяснить?

Обновление 2:

Похоже, что большинство ответов говорят, что это из-за краха поля и моего вопроса дублируется с this. Но учтите, что я установил margin-bottom, но НЕ margin-top. Я также читал о сворачивающихся полях, и я не могу найти ни одного правила, говорящего о том, что margin-bottom может стать margin-top. Может ли кто-нибудь указать мне?

Ответ 1

Отдайте margin-bottom: 50px; до #content вместо #box. Поскольку вы указали высоту на #content div и здесь развалился край.

Здесь объясняется пример

Обновлено Fiddle

Ответ 2

Причина, по которой маржа находится наверху, связана с разворот маржи:

Родительский и первый/последний ребенок
Если нет границы, прокладки, встроенного содержимого или разрешения, чтобы отделить верхний край поля с краем верхнего его первого дочернего блока или без границы, заполнение, встроенное содержимое, высота, минимальная высота или макс. -height, чтобы отделить нижний край блока от нижней границы его последнего дочернего элемента, тогда эти поля рушится. Свернутый край заканчивается вне родителя.

Если вы добавите прозрачную рамку в родительский div (#content), тогда ваша маржа будет вести себя:

#wrapper{
  border: 1px solid #F68004;
}

#content{
  border:1px solid transparent;
  background-color: #0075CF;
  height: 100px;
}

#box{
  margin-bottom: 50px;
  height:10px; background-color:red;
}

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

Ответ 3

Это jsFiddle с вашими ожиданиями:

jsFiddle

поскольку вы хотите, чтобы желтая граница была вокруг всего содержимого, поэтому было бы лучше увеличить высоту вашей обложки.

#wrapper{
  border: 1px solid #F68004;
  height: 150px;
}

#content{
  background-color: #0075CF;
  height: 100px;
}

<div id="wrapper">
    <div id="content">
        <div id="box"></div>
    </div>
</div>

Ответ 4

Вы можете попробовать: демо

Вместо того, чтобы устанавливать высоту на #content, вы можете использовать ее для #box

#content {
  background-color: #0075CF;        
}

#box {margin-bottom: 50px; height: 100px;}

Ответ 5

Пожалуйста, проверьте ниже код

#content {
  background-color: #0075cf;
  height: 100px;
  margin-bottom: 50px;
}

#box{
  /* margin-bottom: 50px; */
}

Ответ 6

Вы должны указать маржу #content вместо #box. И если вы хотите предоставить маржу только #box. Попытайтесь дать ему минус-значение i.e. - (50 + div height) Если высота div #box составляет 150 пикселей, тогда используйте -

#box {
      margin-bottom: -200px;
    }

Ответ 7

Решение 1:

<div id="wrapper">
    <div id="content">       
    </div>
    <div id="box"></div>
</div>

Решение 2:

 <div id="wrapper">
   <div id="content">
      <div id="box"></div>
   </div>
</div>


  <style>
    #wrapper{
    border: 1px solid #F68004;
    height: 150px;
   }

#content{
   background-color: #0075CF;
   height: 100px;
 }

#box{
    /*margin-bottom: 50px;*/
  }
 </style>

Ответ 8

попробуйте это

CSS

#wrapper{
  border: 1px solid #F68004;
}

#content{
  background-color: #0075CF;
  height: 100px;
  margin-bottom: 50px;
}