Что влияет на размеры блочного элемента

Размеры блочного элемента определяются комбинацией CSS-свойств:

1. Ширина/высота (width, height) — базовые размеры
2. Отступы (padding) — увеличивают внутреннее пространство
3. Границы (border) — добавляют толщину по краям
4. Внешние отступы (margin) — не влияют на размер элемента, но занимают место в потоке

Пример с box-sizing:

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* Без box-sizing общая ширина будет 250px (200 + 20*2 + 5*2) */
  box-sizing: border-box; /* Фиксирует общую ширину в 200px */
}

Важно: свойство box-sizing (по умолчанию content-box) определяет, включаются ли padding и border в расчет размеров. При border-box они учитываются внутри указанных width/height.