it-swarm.com.ru

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

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

.child
{
    margin-top: 10px;
}

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

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

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

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

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

360
Robert Koritnik

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

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

430
vdboor

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

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

.child {
    margin-top: 0;
}

.parent {
    padding-top: 10px;
}
46
Ben James

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

  • 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/

19
Ejaz

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

12

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

7
George SEDRA

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

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

.child {
margin-top:260px;
}

http://jsfiddle.net/97fzwuxh/

6
erdomester

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

2
vincent thorpe

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

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

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

1
Zyl

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

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

.parent {
    border:1px solid transparent;
}
1
SandRock

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

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

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;

1
schellmax

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, вы начинаете замечать, что его позиция перемещается.

1
25thhour

Для предотвращения "Div parent" используйте поле "div child":
В родительской программе используйте эти CSS:

  • Float
  • Набивка
  • Бордюр
  • Перелив
0
bingo

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

0
lamplightdev