Привет, дорогие веб-мастера и будущие гуру кодинга! Сегодня мы с вами погрузимся в одну из самых важных концепций в CSS, которая называется "Модель коробки" (Box Model). Если вы когда-либо задумывались, почему ваши элементы на странице ведут себя так, как они ведут, и почему между ними есть расстояния, то вы на правильном пути! Давайте разберемся, как работает эта модель, и почему она важна для создания красивых и удобных веб-страниц. Представьте себе, что каждый элемент на вашей веб-странице — это коробка...

Элементы в CSS представляют собой набор слоёв: ширина и высота самого элемента (width и height), поля элемента (padding), граница элемента (border) и отступы (margin). Подробнее о блочной модели стоит почитать здесь. Долгое время в CSS изменение padding приводило к изменению width у элементов, из-за чего два одинаковых по ширине элемента с разными по ширине полями, в реальности имели разную ширину. Пример ниже демонстрирует этот недуг: https://codepen.io/artik-man/pen/KKPMpdm На помощь в борьбе с этим нелогичным, казалось бы, поведением пришел box-sizing...