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

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

.child
{
    margin-top: 10px;
}

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

Мой DOCTYPEнастроен на XHTML Transitional.

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

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

edit 2
Это поведение одинаково на FF, IE, а также CR.

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

.parent { overflow: auto; }

или:

.parent { overflow: hidden; }

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

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

Обновление по популярному запросу. Суть проблемы заключается в обработке текстового содержимого. Например:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}

<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Или запас трюк даст вам это.

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

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

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}

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

• floats, У вас есть плавать элементы
• border-top, Это толкает -1pxродительский элемент как минимум на 1 пиксель вниз, что затем должно быть скорректировано с введением маржи для самого родительского элемента. Это может создать проблемы, когда родитель уже имеет 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/

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

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

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

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

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

Оптимальное 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>

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

• терка
• набивка
• бордюр
• перелив

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более 16 пикселей, #childвы начинаете замечать, что он перемещается на позицию.

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

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

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

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

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;

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

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

.parent {
    border:1px solid transparent;
}

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