Насколько я понимаю, margin-bottom у вышележащего элемента и margin-top у нижележащего элемента взаимонакладываются.
Кто может на пальцах растолковать, почему тогда себя так странно ведёт положительный margin-top у элемента, у которого нет вышележащего собрата? Т.е. в этом случае margin-top распространяется на его родителя?
Взаимоотношение margin-top и margin-bottom
[12.07.2011 | 23:25]Комментариев (9)
Оставить комментарий
Для отправки комментария вам необходимо авторизоваться.
Лично я заменял на паддинг и не парился :)
В чем корень проблемы ХЗ :)
Я тоже заменял на паддинги и изголялся прочими доступными способами. Но терзает сам факт.
Да, в этом случае margin-top распространяется на его родителя, но не во всех браузерах, для того чтобы это избежать надо родителю прописать padding-top хотя бы в один пиксель, и margin-top можно прописывать как положительный так и отрицательный для первого дочернего элемента.
так а в чём прикол? это документированная хрень? и в чём её функциональное значение?
Потому что это одно из следствий Margin Collapsing.
Если у родительского элемента нет ограничивающих факторов, то margin переходит от внутреннего элемента к внешнему.
Источник
гы. учим матчасть
Margin collapsing в чистом виде, два первых подпункта третьего случая в «Two margins are adjoining if and only if…». Зачем оно так, неплохо объяснено здесь.
Противодействие — либо, как отметила Ольга, задать контейнеру ограничитель (border или padding, хотя бы в 1px), либо задать ему же новый контекст форматирования (напр. с помощью oveflow:hidden или display:inline-block/table/table-cell). В IE6-7 аналогом контекста выступает hasLayout, т.е. margin-ы перестают вываливаться уже от задания контейнеру ширины/высоты (поэтому иногда и кажется, что collapsing происходит «не во всех браузерах»).
ну да, для форматирования текста — неплохая фича. получаются хорошие отступы между, допустим, Н1 и Р (при заданных одновременно верхнем и нижним марджинах для Р). но если умный вебмастер уберёт Н1, то весь бокс с контентом поедет вниз.
жесть, ребята…