Почему все слетает при вёрстке с рамками?

Question

[PRAIT]

Доброго времени суток. Для удобства вёрстки, заключаю все дивы в

div {
 border: 1px solid green;
}

Для того что бы удобнее было верстать ( видеть дивы, секции и т.д )
Но после того как убираю бордер все слетает. Почему так происходит? Правильно ли после такой вёрстки давать бордеру значение transparent?
Или лучше верстать без рамок?

Comments

[Ankhena]

Кроме box-sizing: border-box; наличие рамок влияет и на другие моменты.
Например, на схлопывание вертикальных margin htmlbook.ru/blog/skhlopyvayushchiesya-otstupy
Соответственно, когда вы их убираете, то отступы схлопываются и все уезжает.

Не надо задавать рамки всем блокам подряд.
Смотрите через инспектор проблемные блоки. И если все равно не понятно, что происходит тогда и задавайте border или лучше outline или тень или фон только "подозрительным" блокам.

Answer 1

[Dima Polos]

Видимо потому что ширина и высота элемента считается с учетом этих рамок. Таким образом размер элемента будет равен размеру контента плюс рамки плюс паддинги. Чтобы размер элемента был точно таким, как указано в свойствах width и height надо добавить элементу свойство box-sizing, со значением border-box.

Comments

[PRAIT]

Всегда в начале css у меня

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

Разве этого недостаточно?

[snap44]

PRAIT, этого достаточно чтобы никогда не подпускать вас к верстке :)