Маржа на дочернем элементе перемещает родительский элемент - PullRequest
Новая
       30

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

362 голосов
/ 19 ноября 2009

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

.child
{
    margin-top: 10px;
}

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

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

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

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

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

Ответы [ 14 ]

1 голос
/ 07 апреля 2013

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

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

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

1 голос
/ 19 ноября 2009

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

0 голосов
/ 11 марта 2018

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

  • Float
  • Перетяжка
  • Граница
  • Перелив
0 голосов
/ 20 ноября 2014

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

Страница:
...