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

Я знаю, что это распространенная проблема, но я не могу найти решение, которое работает. У меня есть установки, как это: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-площадной сверху и .content-областью. div .content-area-top имеет размер, чтобы содержать фоновое изображение, которое дает мне округленные углы, которые я хочу.

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

Я использую хром на Mac, но у Firefox есть такая же проблема. Это, вероятно, известное исправление, но я не нашел решения, характерного для моего дела.

источник

2010-06-04 meecect

Используйте файл сброса css, вы получите более последовательное поведение в браузерах. http://developer.yahoo.com/yui/reset/ –

@durilai +1 для сброса YUI! – lewiguez

Я пробовал это, и он разрушает пространство между двумя div, но как только я накладываю стиль с отступлением назад на h1, снова появляется зазор. Настоящая проблема заключается в том, что любое поле на h1 выходит за пределы div, которое его окружает, когда, на мой взгляд, маржа должна полностью содержаться внутри содержащего div. – meecect

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

Why would margin not be contained by parent element?

, в котором большая статью о маржинальном распаде представлена:

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

В статье есть некоторые указатели.

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

источник

2010-06-04 15:51:46 meecect

+1, очень приятно. Чтобы повторить повторение этого ответа, просто установите padding-top на # content-area –

Спасибо, кучка, это меня задело –

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

#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; 
}

источник

2010-07-08 17:28:26 agbb

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

Следующие работали для меня в моих проверенных версиях 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>

источник

2010-09-11 08:50:51 JasonPlutext

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

Обратите внимание: A list apart сказал это красиво!

Yogesh

источник

2011-03-02 04:42:48

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

ответ

Смежные вопросы