Css вертикальный разрыв между divs

Я знаю, что это обычная проблема, но я не могу найти решение, которое работает. У меня есть такая настройка:

 <div id="wrapper">
  <div class="content-area-top"></div>
  <div class="content-area">
   <h1>Title</h1>
   some other text
  </div>
 </div>

.content-area-top {
  height: 12px;
  width: 581px;
  background-image: url(images/content-top.jpg);
 }

.content-area {
margin-left: 10px;
margin-right: 10px;
    background-color: #e9ecfd;
 }

Проблема заключается в том, что существует разрыв между .content-area-top и .content-area. div.content-area-top имеет размер, чтобы содержать фоновое изображение, которое дает мне округленные углы, которые я хочу.

Я знаю, что проблема связана с тем фактом, что в теге H1 установлен верхний маркер (по умолчанию для браузера) (.67em), но я не желаю устанавливать его margin равным 0, и я не понимаю, почему его маржа применяет "внешний" его содержащий div.

Я использую chrome на Mac, но у Firefox есть такая же проблема. Вероятно, это известное исправление, но я не смог найти решение, специфичное для моего случая.

Ответ 1

Смотрите связанный с нами вопрос:

Почему маржа не должна содержаться в родительском элементе?

в котором представлена отличная статья о крахе краев:

http://reference.sitepoint.com/css/collapsingmargins

В статье есть несколько указателей.

Ответ заключается в том, что маржа на H1 сворачивается с положением родительского (.content-area) (в данном случае 0), и поэтому родительский div берет поле H1. Чтобы этого не произошло, родительский div (.content-area) должен иметь набор дополнений или границу или что-то такое, чтобы предотвратить коллапс (который в моем случае приводит мои два div вместе)

Ответ 2

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

Следующее работало для меня в моих проверенных версиях FF, Chrome и IE.

<!-- Set the border-color to your background color. 
     If default white background colour use #FFFFFF -->
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; "> 

  <p >Paragraph 1 in blue box</p>

  <p >Paragraph 2 in blue box</p>

  </div>

  <!-- No space here thanks -->

  <div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; "> 

  <p >Paragraph 1 in green box</p>

  <p >Paragraph 2 in green box</p>

  </div>

Ответ 3

Попробуйте этот подход:

#content-area-top {
  width:581px;
  height:12px;
  float:left;
  background-image:url("images/content-top.jpg");
}

#content-area {
  width:561px; /* substract margin left & right values from it width */
  float:left;
  display:inline; /* prevent ie6-double-margin bug */
  margin:0 10px;
  background-color:#e9ecfd;
}

#wrapper {
  width:581px;
  float:left;
}

Ответ 4

Попробуйте дать действительный doctype. Это сработало для меня:)

Обратите внимание: Список в отдельности сказал это красиво!

Йогеш