Почему браузер так считает ширину?

Question

[techoproMas]

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

Есть 12 div, все они находяться в div "content". Если задать ширину каждому из 12 блоков в 220, margin в 10, padding в 10, то из того расчета чтобы у меня было по 4 div в одной строке получаеться 220+(10*2) = 240 - ширина одного блока. Но когда div "content" свойство width у меня выставлено в 240*4=960, то помещаеться только 3 блока и кусок пустого места. А чтобы разместить 4 блока - нужно задать ширину 975. Как так? Откуда на 4 блоках может браться разница в 15px?

Comments

[Lynn «Кофеман»]

Скроллбар?

Answer 1

[dom1n1k]

По умолчанию паддинги не включаются в значение width, а прибавляются к нему.
Почему? Внятных причин никто не знает :) Так исторически сложилось.
Чтобы включались - см. свойство box-sizing.

Comments

[techoproMas]

Почему именно 15? Ведь на 4 не делиться ни как...

[dom1n1k]

Вообще, надо код смотреть.
Как выстроены блоки в ряд - флекс, флоат, инлайн-блоки, что-то еще?
Например, в случае с инлайн-блоками между ними еще текстовые пробелы будут.

[techoproMas]

Как тогда правильно делать? Мне нужно чтобы блоки были по 200px - 4 штуки в ряд.

[dom1n1k]

Лучше всего флексом