html / css раздражающее поведение по умолчанию

Question

Вот проблема:

У меня есть 2 div - у первого есть float: left - у второго есть margin-top

Теперь, почему, ПОЧЕМУ это поле marginтакже применяется к первому элементу div?

Вот пример с цветами фона, чтобы понять:

http://dl.dropbox.com/u/4225936/whyyyyy.htm

-Edit: Я не ищурешение, но для объяснения этого поведения.Спасибо всем:)

Answer 1

Вы сталкиваетесь с чем-то, что называется margin-collapse.

Если два поля смежны, более старшее будет иметь приоритет. Поскольку поле на вашем втором элементе div находится рядом с полем на вашем контейнере div, эти поля свернуты, и более крупный (50px) имеет приоритет и влияет на них обоих.

Если вы добавите верхний отступ к контейнеру, эффект будет удален, поскольку поля больше не соседствуют.

Редактировать: Обратите внимание, что "больше" иногда не совсем правильно. Например, отрицательная маржа имеет приоритет над нулевой маржей. Я не проверял точно, что это за расчет, поэтому возьмите «больше» с крошкой соли.

Answer 2

дать float:left; для второго деления также

<div style="background: none repeat scroll 0% 0% red; margin: 0pt;">
<div style="background: none repeat scroll 0% 0% green; float: left;">hello</div>
<div style="background: none repeat scroll 0% 0% gold; margin-top: 50px; float: left;">hello</div>

здесь результат.

Answer 3

Вы можете использовать padding-top вместо margin-top