Народ, всем привет. Когда мы говорим о верстке сайтов, одним из самых важных понятий в CSS является box model, ну или «модель коробки», она же блочная модель. Когда-то была табличная верстка, но свершилось чудо и мы от нее ушли. Теперь, всё, что вы видите на веб-странице, будь то абзац, кнопка, изображение или целый блок — всё это по сути прямоугольные коробки. Понимание того, как они устроены, позволяет избежать множества проблем, особенно связанных с "прыгающей" версткой, сломанными отступами и непредсказуемыми размерами элементов.
Модель блока сама по себе показывает, из каких слоёв состоит каждый элемент на странице. Эти слои, если смотреть изнутри, могут быть, скажем:
- Content (содержимое) — это сам текст, изображение или другой контент.
- Padding (внутренний отступ) — пространство между контентом и границей (border), а padding "отталкивает" содержимое от краёв блока.
- Border (граница) — линия, которая может обрамлять элемент. Она может иметь разную толщину, цвет и стиль.
- Margin (внешний отступ) — пространство между этим элементом и другими соседними элементами.
Таким образом, каждый элемент как бы "обернут" в несколько слоёв. И если один из них неправильно задан или не учтен, вся структура может "поехать". И вроде кажется, что все просто и логично, но на практике часто возникают ошибки и не понимание, а «че это тут у меня все съехало».
Как рассчитываются размеры?
Вот ключевая особенность, которую часто упускают новички, ведь по умолчанию ширина и высота элемента включают только content, а padding, border и margin прибавляются сверху.
width: 200px;
padding: 20px;
border: 5px;
Многие думают, что такой элемент будет занимать 200px. Но на самом деле он займет 200 (контент) + 40 (паддинги слева и справа) + 10 (границы слева и справа) = 250px по ширине. И точно так же по высоте. А если заданы margin, то они тоже добавятся, но уже за пределами элемента.
И все эти отступы могут "ломать" сайт. Самый распространенный вариант, это когда контейнеры вылезают за пределы родителя. Ну вот представьте, у вас есть блок шириной 100%, и вы задаете ему padding: 20px. Итоговая ширина становится 100% + 40px, и он вылазит за границы родителя, особенно если родитель имеет фиксированную ширину. Это часто случается при адаптивной верстке, когда блок "не вмещается", появляется горизонтальный скролл, дизайн ломается.
Хотите знать больше? Читайте нас в нашем Telegram – там еще больше интересного: новинки гаджетов, технологии, AI, фишки программистов, примеры дизайна и маркетинга.
Как это решить? Да все просто, использовать box-sizing: border-box, чтобы padding и border учитывались внутри заданной ширины и высоты:
* {
box-sizing: border-box;
}
Эта строка буквально спасает большинство версток. С ней width: 200px означает, что вся коробка, включая паддинги и бордеры, не выйдет за эти 200px.
Кстати, Вам может быть это интересно:
Схлопывание" вертикальных margin'ов
А давайте еще пример. Допустим, у вас есть два блока, один над другим, и у них у обоих задан margin-top: 20px и margin-bottom: 20px. Кажется логичным, что суммарный отступ между ними будет 40px. Но нет!!, в случае вертикальных отступов они схлопываются, и будет только 20px.
Это нормальное поведение CSS, но часто неожиданное. Особенно это вызывает проблемы, если вы хотите, чтобы, скажем, внутренний отступ родителя складывался с отступом дочернего блока — а он "пропадает". Тут можно задать паддинги родителю вместо маржинов дочернему элементу или использовать псевдоэлементы типа ::before с clear: both.
Еще многие сталкиваются с тем, что margin-top у первого элемента внутри flex-контейнера не отодвигает родителя, как ожидалось. Или, наоборот, вдруг родитель сдвигается непредсказуемо. Это связано с особенностями вычисления отступов и контекста форматирования. Поэтому, более гибкое управление с помощью padding у родителя или настройка gap в grid/flex и это часто более предсказуемо:
display: flex;
gap: 20px;
Кстати, часто сайты «ломаются» на мобильных устройствах, когда какой-нибудь блок вылазит за пределы экрана. Обычно это из-за того, что вы задали, например:
width: 100%;
padding: 20px;
Или у элемента есть margin: 20px, а у родителя нет overflow: hidden. В итоге элемент становится шире, чем экран. И тут опять же, спасает box-sizing: border-box и разумное управление внутренними отступами. А также max-width: 100% в сочетании с overflow-x: hidden.
Как не ломать сайт отступами?
Мы тут много говорили, а по итогу вес сводится просто к банальному пониманию того, как это все работает и следованию некоторых принципов:
- используйте box-sizing: border-box по умолчанию для всех элементов, и это избавит от многих сюрпризов.
- понимайте разницу между margin и padding, первый управляет расстоянием между элементами, второй — расстоянием внутри.
- будьте внимательны с 100% шириной + паддингами, это всегда больше, чем вы думаете.
- в flex и grid лучше использовать gap, а не margin, он работает стабильнее и не схлопывается.
- ну и следите за "схлопыванием" вертикальных margin'ов, иногда проще задать padding родителю, чем margin дочке.
Кстати, проверяйте дизайн в devtools. Визуальный инспектор показывает box model и это удобный способ отловить неожиданные отступы и перерасход ширины.
Если Вам нравятся наши статьи, и вы хотите отблагодарить автора (на развитие канала), нам будет очень приятно!
