width и height

width и height задают ширину и высоту блочного элемента; по умолчанию работают с content-box, то есть без учёта padding и border.

Зачем нужно

Контроль размеров — основа любой раскладки. Понимание разницы между фиксированными (px), относительными (%, vw, vh) и адаптивными (min-width, max-width) значениями позволяет строить раскладки, работающие на всех экранах без поломок.

Где используется

  • Фиксированные размеры UI-элементов (кнопки, иконки, аватары)
  • Ограничение ширины текстового контента (max-width)
  • Адаптивные изображения (width: 100%)
  • Полноэкранные секции (height: 100vh)
  • Grid и Flex элементы с явными размерами

Основные значения

.box {
  width: 300px;      /* фиксированная ширина */
  width: 50%;        /* 50% от родителя */
  width: 100vw;      /* 100% ширины вьюпорта */
  width: auto;       /* по умолчанию: блок занимает всю ширину */
  width: max-content; /* по содержимому (не переносится) */
  width: min-content; /* минимальная без переполнения */
  width: fit-content; /* умный размер: не больше max-content, не меньше min-content */
}

min-width, max-width, min-height, max-height

.container {
  width: 100%;
  max-width: 1200px;  /* не шире 1200px */
  min-width: 320px;   /* не уже 320px */
  margin: 0 auto;     /* центрирование */
}

.card {
  height: auto;       /* высота по контенту */
  min-height: 200px;  /* но не менее 200px */
}

box-sizing: влияет на расчёт размеров

/* По умолчанию: padding и border добавляются к width/height */
.content-box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  /* Итоговая ширина: 300 + 40 = 340px */
}

/* border-box: padding и border включены в width/height */
.border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  /* Итоговая ширина: 300px (padding внутри) */
}

/* Современная практика — сброс для всех элементов */
*, *::before, *::after {
  box-sizing: border-box;
}

Частые ошибки

  1. Забыть box-sizing: border-box — элементы выходят за контейнер из-за суммирования padding и width.
  2. height: 100% без высоты у родителя — не работает, если у родителя не задана явная высота; используйте min-height: 100vh или Grid/Flex.
  3. Фиксированная высота для текста — текст переполняет блок; лучше min-height или height: auto.

Связанные темы

Ресурсы