Ужас CSS margin; Маржа добавляет пространство вне родительского элемента

Мои поля css не ведут себя так, как я хочу, или ожидаем их. Мне кажется, что мой верхний маркер заголовка влияет на теги div, окружающие его.

Это то, чего я хочу и ожидаю:

... но это то, что я получаю:

Источник:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

В этом примере я преувеличивал маржу. По умолчанию маркер браузера на h1-теге несколько меньше, и в моем случае я использую Twitter Bootstrap, с Normalizer.css, который устанавливает значение по умолчанию для 10px. Не главное, главное. Я не могу, не хочу, не менять границу на h1-теге.

Я думаю, это похоже на мой другой вопрос; Почему этот CSS-верхний стиль не работает?. Вопрос в том, как решить эту конкретную проблему?

Я прочитал несколько потоков по аналогичным проблемам, но не нашел реальных ответов и решений. Я знаю, что добавление padding:1px; или border:1px; решает проблему. Но это только добавляет новые проблемы, так как я не хочу заполнения или рамки для своих div-тегов.

Должно быть лучшее решение, лучшее решение? Это должно быть довольно часто.

Ответ 1

Добавьте overflow:auto в свой #page div.

Пример jsFiddle

И проверьте сворачивающиеся поля, пока вы на нем.

Ответ 2

Это вызвано collapsing margins. См. Статью об этом поведении здесь.

Согласно статье:

Спецификация W3C определяет сворачивающиеся поля следующим образом:

"В этой спецификации поля сбрасывания выражения означают, что прилегающие поля (без непустого содержимого, заполнения или пограничных областей или разметки их разметки) из двух или более ящиков (которые могут быть рядом друг с другом или вложенными) объединить, чтобы сформировать единый запас".

Это также верно для элементов parent-child.

Все ответы включают одно из возможных решений:

Существуют и другие ситуации, когда элементы не имеют разрывов полей:

плавающие элементы

абсолютно позиционированные элементы

элементы встроенного блока

элементы с переполнением установлены на что-либо, кроме видимого (они не сворачивают поля со своими дочерними элементами.)

очищенные элементы (они не сворачивают свои верхние поля с нижним полем их родительских блоков.)

корневой элемент

Ответ 3

Проблема заключалась в том, что родитель не учитывал детей по высоте. Добавление display:inline-block; сделал это для меня.

Полный CSS

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

См. "Скрипт"