Насколько я понимаю, margin-bottom у вышележащего элемента и margin-top у нижележащего элемента взаимонакладываются.
Кто может на пальцах растолковать, почему тогда себя так странно ведёт положительный margin-top у элемента, у которого нет вышележащего собрата? Т.е. в этом случае margin-top распространяется на его родителя?

Оценить:|
  
Комментировать
Раздел: CSS    
Просмотров: 1673
Комментариев (9)
  1. Greg
    Григорий Кочнев [Greg]
    13.07.2011 в 14:07

    Лично я заменял на паддинг и не парился :)
    В чем корень проблемы ХЗ :)

  2. Ольга [Olga]
    14.07.2011 в 10:45

    Да, в этом случае margin-top распространяется на его родителя, но не во всех браузерах, для того чтобы это избежать надо родителю прописать padding-top хотя бы в один пиксель, и margin-top можно прописывать как положительный так и отрицательный для первого дочернего элемента.

  3. Ольга [Olga]
    14.07.2011 в 11:12

    Потому что это одно из следствий Margin Collapsing.
    Если у родительского элемента нет ограничивающих факторов, то margin переходит от внутреннего элемента к внешнему.

    Источник

  4. SelenIT
    SelenIT
    21.07.2011 в 09:17

    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 происходит «не во всех браузерах»).

  5. Deff
    Андрей Данилов [Deff]
    21.07.2011 в 23:56

    ну да, для форматирования текста — неплохая фича. получаются хорошие отступы между, допустим, Н1 и Р (при заданных одновременно верхнем и нижним марджинах для Р). но если умный вебмастер уберёт Н1, то весь бокс с контентом поедет вниз.

  6. cssfish
    17.10.2011 в 15:21

    жесть, ребята…

Оставить комментарий