Почему “едут” размеры некоторых элементов? — 27 марта 2026 г. в 11:46:04.975
Почему “едут” размеры некоторых элементов? По умолчанию (box-sizing: content-box) width и height задают только размер контента, без учёта padding и border. Из-за этого элементы становятся больше, чем ожидаешь, и layout ломается: .box { width: 200px; padding: 20px; } Фактическая ширина здесь будет 240px, что часто приводит к переполнениям: .box { box-sizing: border-box; } Теперь padding и border учитываются внутри заданной ширины, и итоговый размер остаётся 200px: *, *::before, *::after { box-sizing: border-box; } Поэтому это правило обычно задают глобально, чтобы вся верстка стала предсказуемой. Это снижает количество проблем с размерами и делает layout стабильнее. Code Ready | #совет
367 просмотров