Размеры, схлопывание margin

Управляем размерами блоков и разбираем коварную особенность вертикальных отступов.

Свойства width/height и их min/max-версии задают размеры элемента, а вертикальные margin соседей умеют «схлопываться» в один.

width и height

Задают ширину и высоту. Значения — в пикселях, процентах или других единицах. Процент считается от размера родителя.

.box {
  width: 50%;   /* половина ширины родителя */
  height: 200px;
}

Важная деталь: блочные элементы по умолчанию и так занимают всю ширину родителя, поэтому width чаще ограничивает ширину, а не задаёт. С высотой осторожнее — жёсткая height может обрезать содержимое, если текста окажется больше. Часто высоту вообще не задают и позволяют блоку расти под содержимое.

min-width, max-width и адаптивность

Эти свойства задают границы, в которых элемент может менять размер. Они — основа гибкой вёрстки.

.container {
  width: 90%;
  max-width: 1200px; /* не шире 1200px на больших экранах */
  margin: 0 auto;
}

Эта связка — рабочая лошадка вёрстки. На телефоне контейнер занимает 90% ширины, а на широком мониторе перестаёт растягиваться после 1200px, чтобы строки текста не становились нечитаемо длинными. Аналогично min-width не даёт блоку стать слишком узким.

img {
  max-width: 100%; /* картинка не вылезет за пределы контейнера */
}

Это правило для картинок — обязательный приём адаптивности: изображение ужимается под узкий экран и никогда не «прорывает» макет.

Памятка по размерам

Свойство	Смысл
`width` / `height`	желаемый размер
`min-width` / `min-height`	не меньше этого
`max-width` / `max-height`	не больше этого

Схлопывание вертикальных margin

Теперь — особенность, которая удивляет всех новичков. Если у одного элемента margin-bottom, а у следующего margin-top, между ними не складываются оба отступа. Вместо суммы берётся больший из двух. Это называется «схлопыванием» (margin collapsing).

.first  { margin-bottom: 30px; }
.second { margin-top: 20px; }

Между блоками будет зазор 30px, а не 50px. Браузер взял больший отступ и проигнорировал меньший. Это касается только вертикальных margin соседних блоков; горизонтальные отступы складываются как обычно.

Почему это важно знать

Новички часто недоумевают: «я задал 30 и 20, почему зазор не 50?». Теперь вы знаете ответ. Чтобы избежать путаницы, многие задают отступы только с одной стороны — например, всегда margin-bottom у блоков. Тогда схлопывать нечего, и расстояния предсказуемы.

Итог

max-width + margin: 0 auto — стандартный адаптивный контейнер.
img { max-width: 100% } не даёт картинкам вылезти за макет.
Вертикальные margin соседей схлопываются: берётся больший, а не сумма.