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. Это сработало для меня:)
Обратите внимание: Список в отдельности сказал это красиво!
Йогеш