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

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

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

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

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

Обновление 2021 года: если вы хотите отказаться от поддержки IE11, вы также можете использовать новую конструкцию CSS display: flow-root. См. веб-документы MDN для получения полной информации о блоке. контексты форматирования.

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

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<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, Это подталкивает родительский элемент минимум на 1 пиксель вниз, который затем следует скорректировать, добавив поля -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/

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

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

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

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

Чтобы предотвратить «родительский элемент Div», используйте поле «дочерний элемент div»:
В родительском элементе используйте следующие css:

• Плавать
• Обивка
• Граница
• Переполнение

Аккуратное решение только для 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>

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

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

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

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

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

что интересно, мое любимое решение этой проблемы здесь еще не упоминается: использование 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;

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

Однако ваш ящик будет использовать дополнительные пиксели ...

.parent {
    border:1px solid transparent;
}

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