Почему не работает margin отступ?

Question

[Богдан Сорока]

На картинке видно 4 блока с разными цветами. Проблема в том что я не могу сделать отступ снизу(margin).
jsfiddle.net/nrL9LLp5

Answer 1

[Алексей Николаев]

Вы забыли очистить float. Для этого используется прием под названием clearfix. Если вы обратите внимание, без этого приема высота контейнера с вашими блоками будет равна нулю, и из этого вытекают все проблемы.

Обновил jsfiddle.

Comments

[Евгений Петров]

Аха. Вот эти парни. Мне интересно, а почему table, а не block?

[Алексей Николаев]

Евгений Петров: такая техника.

[Евгений Петров]

Я ещё раз повторю вопрос — почему table, а не block?

[Алексей Николаев]

Евгений Петров: display: table создает пустую строку и ячейку, что предотвращает margin-collapse. Если умные дяди достаточно умны, чтобы придумывать новые хаки и техники, то этому 100% есть веская причина.

[Евгений Петров]

Алексей Николаев: Да я просто про то, что тут нет margin-collapse.

[Евгений Петров]

И пустая строка не создаётся — только область табличного типа.

[Алексей Николаев]

Евгений Петров не будете же вы делать несколько типов clearfix для реального проекта? Сделаете один универсальный класс.

Насчет создаваемого - тут говорится, что "So display:table will automatically generate an anonymous table-row, and within that, an anonymous table-cell..."
Т.е. это утверждение неверно?..

[Евгений Петров]

Я про пустую строку говорил — нет такой. А насчёт универсального класса... Посмотрите jsfiddle.net/petroveg/avjLscwf/1

Не думаю, что при вёрстке блока, стоящего за плавающим, рассчитывают на такое поведение контейнера с вложенными элементами. Так что, скорее всего, я для предотвращения выпадения плавающих потомков оставлю только :after.

Answer 2

[holymotion]

элементарно можно так же за float'ить контейнер. Дело в том, что у вас оба блока как бы "поднялись" из-за "float" и следовательно блок "схлопывается", т.к. не видит там блоков.