Почему у первого блока ширина меньше, чем у остальных, хотя у всех width 100%?

Question

[Mesuti]

Привет!
Почему у первого блока ширина меньше, чем у остальных?

Безуспешно пробовал:
- менять на flex/block,
- внутренние элементы выравнивать через float

https://jsfiddle.net/Vaniljs/0dkft1h7/

Answer 1

[iBird Rose]

потому что box-sizing: content-box;
и это не у первого блока ширина меньше, а у второго больше и выходит за края.
либо делай box-sizing: border-box;
либо верстай учитывая особенности content-box

Comments

[Mesuti]

спасибо!
вот тут-то я и понял, почему на уроках говорят - ставьте всегда * box-sizing. =)

[Rustam Bainazarov]

Mesuti, вот так:

*, :before, :after {
   box-sizing: border-box;
}

[Mesuti]

Рустам Байназаров, спасибо за оптимальное решение!

[Rustam Bainazarov]

Mesuti, да не за что, это сейчас стандартный и самый первый сброс по сути.