Столкнулся недавно с таким странным поведением блоков (div). Чисто теоретически я представлял себе такую картину.
Есть 2  вложенных блока,  блок контейнер в 2 раза больше вложенного блока. Ставим margin-top вложенного блока и блок должен сместится относительно верхней границы блока контейнера на величину margin. Что происходит на самом деле. Сдвигаются 2 блока и блок контейнер и вложенный на величину margin от верхней границы окна. 
Дальше фокус, ставим свойство border:1px solid; для обоих блоков и вуаля, вложенный смещается относительно верхней границы блока контейнера как и должно быть по логике вещей. 
Пример:



Вопрос, мои представления о блоках неправильные ? и я чего то не понимаю, почему такое поведение блоков без border и почему блоки ведут себя логично, когда есть border ?

Это сообщение отредактировал(а) fell - 12.6.2011, 16:39

Я тебе один умный вещь скажу, только ты не обижайся    - может стоит правильно писать цвет? "gray" и ... вуаля, элемент div ведет себя, как это тебе не странно, вполне предсказуемо.

ага поправил, но положение вещей не изменилось, как и следовало ожидать ...

Приведу тут пример полностью



Это сообщение отредактировал(а) fell - 12.6.2011, 16:41

А, вот ты о чем, ну дык для #a ставим overflow:hidden; и сказка кончается   

ага
а можно пояснить механику так сказать, в чем дело то ?

http://www.w3.org/TR/CSS2/box.html#collapsing-margins На эту тему очень много статей.

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

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

Это сообщение отредактировал(а) fell - 12.6.2011, 19:12

Ну, на самом деле не все так плохо, да и я бы не стал называть это "хак", зная о поведении отступов, это просто назначение определенного свойства элементу, не более.
Кстати, не знаю, возможно у тебя не совсем верный подход, может не стоит в твоем случае применять маргин, зависит конечно от дизайна, но я бы для #a назначил -  padding:30px 0px; и соответственно высоту 40рх.

сделал пока 1px падинг у контейнера, а вот кстати объяснение почему это работает в одном из комментариев к этому посту 

"Этим способам есть простое объяснение: поля (margin) схлопываются при соприкосании. При добавлении padding и border соприкосания не происходит, hidden отсекает поля друг от друга."

update: 
Что в общем то не верно, ибо в примере у нас есть только один margin и margin это отступ от границы (border), а не поля. Можно себе представлять это как будто у контейнера нет границ,  то есть происходит то самое overflow за границы контейнера. Padding и border эти границы обозначают. В этом смысле, вероятно padding, будет лучшей заменой margin.

Это сообщение отредактировал(а) fell - 13.6.2011, 10:41