Одинаковый отступ для блоков. Проблема с margin

Добрый день уважаемые. Столкнулся с непониманием этапа верстки подскажите, как решить.
Есть большой див 1000х1000рх. В нём должно содержатся 9 блоков равно удаленных друг от друга и от границ большого дива. У меня почему то с этим вышла запара.
https://jsfiddle.net/BlackStar1991/8ku7gLhe/1/
Я создаю блоки с классом float: left; и задаю им margin; равный половине длинны стороны маленького блока. Не могу понять почему они у меня не выстраиваються по 3 в ряд? Я вроди как читал что внешние отступы должны как ды склеиваться и дочерних эллементов, почему тут не так ?

(ПС Буду также очень благодарен и за совет с flex-box)

схлопывание и выпадение отступов, про которое вы пишите, работает только в случае стандартной блочной модели и на флоаты не распространяется

1 лайк

ОК. Спасибо, не знал.
Как решить?
Через inlaine-block результат тот же выходит.

Отступ справа у каждого третьего элемента надо обнулять, иначе не выстроить.

.block:nth-child(3n) {
  margin-right: 0;
}

Но все равно надо всё высчитывать. Учитывая, что отступы справа и слева не склеиваются, по они должны быть по 50px, чтобы в сумме расстояние между блоками 100px было.

1 лайк

Спасибо, меня уже посетила муза. Нашел проще )
https://jsfiddle.net/8ku7gLhe/2/