Маржа на дочернем элементе перемещает родительский элемент

У меня есть div (parent), который содержит другой div ( child). Родитель является первым элементом в body без определенного стиля CSS. Когда я устанавливаю

.child
{
    margin-top: 10px;
}

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

Мой DOCTYPE установлен на XHTML Transitional.

Что мне здесь не хватает?

изменить 1
Мой родитель должен иметь строго определенные размеры, потому что у него есть фон, который должен отображаться под ним сверху вниз (идеальный пиксель). Таким образом, установка вертикальных полей на нем - не идти.

изменить 2
Такое поведение одинаково для FF, IE, а также CR.

ОТВЕТЫ

Ответ 1

Найден альтернативу в дочерних элементах с полями в DIVs. Вы также можете добавить:

.parent { overflow: auto; }

или

.parent { overflow: hidden; }

Это предотвращает крах полей . Граница и прокладка делают то же самое. Следовательно, вы также можете использовать следующее для предотвращения краха верхнего края:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

Обновление по популярному запросу: Весь смысл сворачивания полей - обработка текстового контента. Например:

<style type="text/css">
    h1, h2, p, ul {
        margin-top: 1em;
        margin-bottom: 1em;
    }
</style>

<h1>Title!</h1>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
</div>
<div class="text">
    <h2>Title!</h2>
    <p>Paragraph</p>
    <ul>
        <li>list item</li>
    </ul>
</div>

Поскольку браузер обрушивает поля, текст будет выглядеть так, как вы ожидали, а теги-теги <div> не влияют на поля. Каждый элемент гарантирует, что он будет располагаться вокруг него, но расстояние не будет удвоено. Поля <h2> и <p> не будут складываться, а скользят друг в друга (они рушатся). То же самое происходит и с элементами <p> и <ul>.

К сожалению, с современными проектами эта идея может укусить вас, когда вы явно хотите контейнер. Это называется новым блоком форматирования контекста в CSS говорят. Этот трюк overflow или margin даст вам это.

Ответ 2

Это нормальное поведение (по крайней мере, среди реализаций браузера). Маржа не влияет на положение ребенка по отношению к ее родительскому объекту, если родительский элемент не имеет дополнения, и в этом случае большинство браузеров затем добавят дочерний маркер к родительскому дополнению.

Чтобы получить нужное поведение, вам необходимо:

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

Ответ 3

Хотя все ответы устраняют проблему, но у них есть компромиссы/корректировки/компромиссы, например

  • floats, вы должны плавать элементы
  • border-top. Это подталкивает родителя по крайней мере на 1px вниз, который затем должен быть скорректирован с введением маркера -1px к самому родительскому элементу. Это может создать проблемы, когда у родителя уже есть margin-top в относительных единицах.
  • padding-top, тот же эффект, что и при использовании border-top
  • overflow: hidden, не может использоваться, когда родитель должен отображать переполненный контент, например выпадающее меню
  • overflow: auto, вводит полосы прокрутки для родительского элемента, который имеет (намеренно) переполняющий контент (например, тени или треугольник подсказки)

Проблема может быть решена с использованием псевдо-элементов CSS3 следующим образом

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/

Ответ 4

добавить стиль display:inline-block к дочернему элементу

Ответ 5

родительский элемент не должен быть пустым, по крайней мере, поставить &nbsp; перед дочерним элементом.

Ответ 6

Это то, что сработало для меня

.parent {
padding-top: 1px;
margin-top: -1px;
}

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Ответ 7

Элементы margin элементов, содержащихся в .child, сжимаются.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

В этом примере p получает margin из стилей по умолчанию в браузере. Браузер по умолчанию font-size обычно 16px. Имея margin-top более 16px на #child, вы начинаете замечать его перемещение позиции.

Ответ 8

У меня тоже была эта проблема, но я предпочел исключить негативные маркеры, поэтому я поставил

<div class="supercontainer"></div>

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

Ответ 9

Интересно, что мое любимое решение этой проблемы еще не упомянуто здесь: использование float.

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

см. здесь: http://codepen.io/anon/pen/Iphol

обратите внимание, что если вам нужна динамическая высота для родителя, она также должна плавать, поэтому просто замените height:100px; на float:left;

Ответ 10

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

Ответ 11

Использование top вместо margin-top - это еще одно возможное решение, если это необходимо.

Ответ 12

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

Ваша коробка будет использовать дополнительные пиксели, хотя...

.parent {
    border:1px solid transparent;
}

Ответ 13

Оптимальное решение только для CSS

Используйте следующий код, чтобы добавить непредвиденного первого ребенка к непреднамеренно движущемуся div:

.parent:before
{content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}

Преимущество этого метода заключается в том, что вам не нужно менять CSS любого существующего элемента и поэтому имеет минимальное влияние на дизайн. Рядом с этим добавленный элемент является псевдоэлементом, который не находится в DOM-дереве.

Поддержка псевдоэлементов широко распространена: Firefox 3+, Safari 3+, Chrome 3+, Opera 10+ и IE 8+. Это будет работать в любом современном браузере (будьте осторожны с новым ::before, который не поддерживается в IE8).

Контекст

Если у первого дочернего элемента элемента margin-top, родитель будет корректировать свою позицию как способ сбрасывания избыточных полей. Зачем? Это просто так.

Учитывая следующую проблему:

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
</style>

<div class="parent"><!--This div moves 40px too-->
    <div class="child">Hello world!</div>
</div>

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

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}
.fix {position: relative;white-space: pre;height: 0px;width: 0px;overflow: hidden;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="fix"></div>
    <div class="child">Hello world!</div>
</div>

Где position: relative; обеспечивает правильное позиционирование исправления. И white-space: pre; заставляет вас не добавлять какой-либо контент - как пробел - к исправлению. И height: 0px;width: 0px;overflow: hidden; гарантирует, что вы никогда не увидите исправление.

Вам может потребоваться добавить line-height: 0px; или max-height: 0px;, чтобы гарантировать, что высота на самом деле равна нулю в старых браузерах IE (я не уверен). И, возможно, вы можете добавить <!--dummy--> к нему в старых браузерах IE, если он не работает.

Короче говоря, вы можете сделать все это только с помощью CSS (который устраняет необходимость добавления фактического дочернего элемента в HTML-DOM-дерево):

<style type="text/css">
div {position: relative;}
.parent {background-color: #ccc;}
.child {margin-top: 40px;}

.parent:before {content: '';position: relative;height: 0px;width: 0px;overflow: hidden;white-space: pre;}
</style>

<div class="parent"><!--This div won't move anymore-->
    <div class="child">Hello world!</div>
</div>

Ответ 14

Чтобы предотвратить использование родительского элемента Div, используйте поле "div child":
В ролике используйте эти css:

  • Float
  • Перетяжка
  • Border
  • Переполнение