Почему 4 блока по 25% не встают в одну линию?

Question

[Антон]

https://codepen.io/anon/pen/JBQROw?editors=1100
Почему так, если код писать в строчку, то блоки в одну линию, а если писать в столбик, то блоки не влезают?

Answer 1

[Denis Kunitsyn]

.container{display:flex}

Comments

[Антон]

flex всегда нужно использовать не блоков, а для контейнера выходит?

[Stalker_RED]

Антон, а контейнер это не блок?

[Denis Kunitsyn]

Антон, применяя flex к родителю дочерние элементы перенимают это свойство

Answer 2

[Stalker_RED]

Потому что между ними пробелы.
25%+пробел+25%+пробел+25%+пробел+25% в итоге дают больше 100%

Comments

[Mesuti]

Почему нулевые padding и margin не убирают пробелы?

[Stalker_RED]

Александр Сорокин, у вас там не отступы а именно пробелы как символ. Вот такие, как в скобочках: ( )

[Антон]

Так и так понятно, что пробелы, вопрос то почему так, ведь разве div это не блочные элементы?

[Stalker_RED]

Антон, вот это вы писали же?
.block { ... display:inline-block; }
Разницу между block и inline-block понимаете?

[Антон]

Stalker_RED, block в столбик, а inline-block в строчку. Видимо, inline-block делает элемент строчным, да? (не задумывался раньше)

[Stalker_RED]

Антон, а что по вашему значит "inline"? :)

Answer 3

[Patient322]

Отображаются пробелы.
Для контейнера можно стелать font-size: 0; а для блоков переопределить на нужный