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

мои поля css ведут себя не так, как я хочу или ожидаю. Мне кажется, что мой заголовок margin-top влияет на 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-tag несколько меньше, и в моем случае я использую Twitter Bootstrap, с Нормализатором.css который устанавливает маржу по умолчанию в 10px. Не то чтобы важно, главное есть; я не могу, не должен,не хочу измените поле на h1-теге.

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

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

должно быть лучшее, лучшая практика, решение? Это должно быть довольно обычным.

3 87
html css overflow margin

3 ответа:

добавить overflow:auto на #page div.

пример jsFiddle

выезд сворачивание поля пока вы на нем.

145

добавьте любое из следующих правил:

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

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

по статье:

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

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

Это также верно для родительско-дочерних элементов.

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

есть и другие ситуации, когда элементы не имеют их поля свернуты:

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

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

полный CSS

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

Посмотреть Скрипка

12