Схлопывание margin'ов

[atatakobry]

Доброе утро.

Часто возникают ситуации, когда необходимо отменить действие схлопывания отступов. Тут вроде бы все понятно: флоаты, воерфлоу-хиддены, клеарфиксы, паддинги и бордеры в помощь.

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

Задача.

В потоке идут несколько дивов-контейнеров для последующего контента. Марджины для них заданы как для топ, так и для боттом.

Проблема.

Все прекрасно работает до тех пор, пока в одном из контейнеров не появляется колонки типа флоат. Следовательно, для корректного отображения родительскому диву необходимо ставить, к примеру, overflow: hidden, что в свою очередь отменяет схлопывания для этого контейнера. Что не есть хорошо (

Вопрос.

Как сделать, чтобы работало схлопывание?)

Код.

http://jsfiddle.net/atatakobry/x8VTT/

[wwt]

мм может так http://jsfiddle.net/x8VTT/2/ использовать отрицательный margin для плавающих блоков

[SelenIT]

В данном примере главная помеха слопыванию — не overflow, а сами float-ы. Так что придется переопределить margin-ы для абзацев в них или задать отрицательные вертикальные margin-ы самим float-ам (как предложили выше).

[atatakobry]

мм может так http://jsfiddle.net/x8VTT/2/ использовать отрицательный margin для плавающих блоков

а если внутри плавающих блоков будет последний элемент не абзац р, а например цитата блокквот с, например, меньшими марджинами — http://jsfiddle.net/atatakobry/XhURW/. Такая верстка просто съезт цитаты (. Так что не подходит.

В данном примере главная помеха слопыванию — не overflow, а сами float-ы. Так что придется переопределить margin-ы для абзацев в них или задать отрицательные вертикальные margin-ы самим float-ам (как предложили выше).

проблема в том, что неизвестно какой контент будет в этих флоатах, с какими марджинами.

Может, стоит и вовсе отказаться от схлопывания и везде для дивов-контейнеров прописывать, например, вручную только марджин-боттом? Но мне такое решение кажется немного каструбатым.

Неужели, кто использует схлопывание не так сильно придирается к размеру отступов? И неважно, будет отступ 40рх со схлопыванием или 50рх без него?

Edited August 21, 2012 by atatakobry

[wwt]

мм может так http://jsfiddle.net/x8VTT/2/ использовать отрицательный margin для плавающих блоков

а если внутри плавающих блоков будет последний элемент не абзац р, а например цитата блокквот с, например, меньшими марджинами — http://jsfiddle.net/atatakobry/XhURW/. Такая верстка просто съезт цитаты (. Так что не подходит.

В данном примере главная помеха слопыванию — не overflow, а сами float-ы. Так что придется переопределить margin-ы для абзацев в них или задать отрицательные вертикальные margin-ы самим float-ам (как предложили выше).

проблема в том, что неизвестно какой контент будет в этих флоатах, с какими марджинами.

Может, стоит и вовсе отказаться от схлопывания и везде для дивов-контейнеров прописывать, например, вручную только марджин-боттом? Но мне такое решение кажется немного каструбатым.

Неужели, кто использует схлопывание не так сильно придирается к размеру отступов? И неважно, будет отступ 40рх со схлопыванием или 50рх без него?

В стартовом после о других вложенных элементах с другими отступами речи не шло ))) Но раз вы не знаете что будет внутри то:

.d2-right *,
.d2-left * {
    margin: 0;
}

[atatakobry]

В стартовом после о других вложенных элементах с другими отступами речи не шло ))) Но раз вы не знаете что будет внутри то:

.d2-right *,
.d2-left * {
    margin: 0;
}

Чего уж мелочиться))

* {
    margin: 0;
    padding: 0;
}

[SelenIT]

Просто и схлопывание, и "вываливание" из потока было придумано как раз для того, чтобы блоки шли целостным потоком. Отмена этого дефолтного поведения закономерно ломает поток, и любая попытка соблюсти эти взаимоисключающие параграфы невольно ведет к тем или иным "каструбатым" компромиссам.

Пожалуй, наиболее удачный компромисс для новых браузеров (IE9+) — с вот таким переопределением.

Чего уж мелочиться))

Не взлетит. Специфичности не хватит.

[wwt]

В стартовом после о других вложенных элементах с другими отступами речи не шло ))) Но раз вы не знаете что будет внутри то:

.d2-right *,
.d2-left * {
    margin: 0;
}

Чего уж мелочиться))

* {
    margin: 0;
    padding: 0;
}

Странная у вас реакция, ваш пример в данном коде никаких действий не произведет ибо у всех елементов назначены margin'ы, а подействует на все элементы страницы если только сделать !important в этом случае отступы пропадут у абсолютно всех элементов страницы. Тогда когда мой пример действует только на потомков плавающих блоков первого уровня вложенности (никто же не мешает для нужных переопределить ниже).

Можете сравнить:

Мой пример http://jsfiddle.net/x8VTT/4/

Ваш сарказм http://jsfiddle.net/x8VTT/5/

ЗЫ а вообще не совсем понятно стремление, вы незнаете что за контент будет внутри и с какими отступами но хотите чтоб было все тип топ )) Это называется пойди туда незнаю куда и найди то незнаю что.

ЗЫЗЫ а вообще юзайте js проверяйте какой отступ у вложенных элементов и от этого прыгайте, скрипт сделает за вас то что не может css.

Edited August 21, 2012 by wwt

[atatakobry]

То был не сарказм, а пятиминутка тупняка от меня) Сорри)

Проет ориентирован на ИЕ9+, так что псевдоклассы выглядят неплохой альтернативой, спасибо, попробую.

[wwt]

Пожалуй, наиболее удачный компромисс для новых браузеров (IE9+) — с вот таким переопределением.

проблема в том что если в плавающем блоке окажется более 2 элементов. Хотя ТС об этом не сказан, но ведь он и про другое сказал не сразу =)

Хотя раз проект под IE9+ то мона :nth-child(odd) :nth-child(even)

Edited August 21, 2012 by wwt

[atatakobry]

проблема в том что если в плавающем блоке окажется более 2 элементов. Хотя ТС об этом не сказан, но ведь он и пр одругое сказал не сразу =)

Я просто думал, что есть какой-то общий способ, поэтому убрал детали, чтобы не запутать.

А в чем проблема,

в том что если в плавающем блоке окажется более 2 элементов

?

Псевдоклассы уберут верхний марджин первого и нижний марджин последнего элемента, или где-то подвох?

[SelenIT]

проблема в том что если в плавающем блоке окажется более 2 элементов. Хотя ТС об этом не сказан, но ведь он и про другое сказал не сразу =)

Хотя раз проект под IE9+ то мона :nth-child(odd) :nth-child(even)

Пардон... в чем именно проблема?

В моем примере обнуляются наружные маргины крайних элементов в самом блоке c overflow и в его плавающих потомках с явно заданными классами. Таким образом, расстояния между блоком с overflow и его соседями целиком определяются схлопнутыми margin-ами этих соседей. А количество элементов ни на что не влияет. Конечно, если появятся плавающие потомки с другими классами, их придется дописать в селектор...

[wwt]

проблема в том что если в плавающем блоке окажется более 2 элементов. Хотя ТС об этом не сказан, но ведь он и пр одругое сказал не сразу =)

Я просто думал, что есть какой-то общий способ, поэтому убрал детали, чтобы не запутать.

А в чем проблема,

в том что если в плавающем блоке окажется более 2 элементов

?

Псевдоклассы уберут верхний марджин первого и нижний марджин последнего элемента, или где-то подвох?

вот что будет если убрать маргин только у первого и последнего потомков в блоке в случае если потомков больше 2 для этого кода http://jsfiddle.net/x8VTT/6/

[SelenIT]

И что? Между всеми абзацами остается 100-пиксельный вертикальный зазор, как, видимо, и предполагает этот своеобразный дизайн (раз по умолчанию margin прописан для абзацев, а не для блоков)

[wwt]

проблема в том что если в плавающем блоке окажется более 2 элементов. Хотя ТС об этом не сказан, но ведь он и про другое сказал не сразу =)

Хотя раз проект под IE9+ то мона :nth-child(odd) :nth-child(even)

Пардон... в чем именно проблема?

В моем примере обнуляются наружные маргины крайних элементов в самом блоке c overflow и в его плавающих потомках с явно заданными классами. Таким образом, расстояния между блоком с overflow и его соседями целиком определяются схлопнутыми margin-ами этих соседей. А количество элементов ни на что не влияет. Конечно, если появятся плавающие потомки с другими классами, их придется дописать в селектор...

я имел ввиду не более 2 плавающих, а более 2 элементов в самом плавающем блоке , у средних элементов маргин в этом случае не отменится и будут отступы вот о чем я говорил.

И что? Между всеми абзацами остается 100-пиксельный вертикальный зазор, как, видимо, и предполагает этот своеобразный дизайн...

[SelenIT]

у средних элементов маргин в этом случае не отменится

Его никто не просил отменять, просили убрать лишь удвоение зазоров из-за пропавшего схлопывания. А такой гигантский зазор, возможно, в примере был просто утрирован для наглядности.

[wwt]

у средних элементов маргин в этом случае не отменится

Его никто не просил отменять, просили убрать лишь удвоение зазоров из-за пропавшего схлопывания. А такой гигантский зазор, возможно, в примере был просто утрирован для наглядности.

Ну вообще да, это я уже додумывать начал, моя ошибка ))

[atatakobry]

SelenIT все правильно говорит. Зазоры лишь для наглядности. Все чотко))))