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

Question

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

 <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 существует разрыв. Размер .content-area-top div содержит фоновое изображение, которое дает мне закругленные углы, которые я хочу.

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

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

Answer 1

См. Здесь для связанных вопросов:

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

, в которой представлена ​​отличная статья о коллапсе маржи:

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

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

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

Answer 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> 

Answer 3

Попробуйте указать действительный тип документа. У меня это сработало :) 1001 *

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

Yogesh

Answer 4

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

#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's width */
  float:left;
  display:inline; /* prevent ie6-double-margin bug */
  margin:0 10px;
  background-color:#e9ecfd;
}

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