it-roy-ru.com

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

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

Это то, что я хочу и ожидаю:What I want....

... но это то, что я в конечном итоге:What I get...

Источник:

<!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 или границы.

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

102
jamietelin

Добавьте overflow:auto к вашему #page div.

Пример jsFiddle

И проверить рушится поля пока вы на это.

165
j08691

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

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

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

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

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

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

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

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

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

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

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

Полный CSS

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

Смотрите Fiddle

13
jonBreizh

Решения в других ответах не сработали для меня. Прозрачные границы, inline-block и т.д. - все это вызывало другие проблемы. Вместо этого я добавил следующий CSS к своему элементу предка:

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

В зависимости от вашей ситуации это может вызывать собственные проблемы, поскольку добавляет дополнительный пробел после последнего дочернего элемента.

0
Trevor

Просто добавьте border-top: 1px solid transparent; к вашему элементу #page.

0
Amid