Размеры элементов

width и height задают размеры элемента. min-width/max-width ограничивают размеры снизу и сверху. max-width: 100% — предотвращает выход за контейнер. min-height — гарантирует минимальную высоту. Эти свойства критичны для адаптивной вёрстки.

Свойства размеров:

width/height:

• auto (по умолчанию) — элемент занимает доступное пространство
• px, %, rem, vw — конкретные значения
• fit-content — размер по содержимому

min-width/max-width:

• max-width: 100% — элемент не выходит за контейнер
• min-width: 300px — элемент не будет уже 300px

min-height/max-height:

• min-height: 100vh — блок минимум на весь экран
• max-height: 500px — ограничение высоты

width: auto vs width: 100%:

• auto: элемент занимает доступное пространство (с учётом padding/margin)
• 100%: элемент = 100% ширины РОДИТЕЛЯ (padding/margin не учитываются)

Рекомендации:

• Контейнеры: max-width: 1200px + margin: 0 auto
• Картинки: max-width: 100% + height: auto
• Карточки: min-height для одинаковой высоты
• Текст: max-width: 65ch (читаемость)

Размеры — как ограничители на полке. width — точная ширина полки. max-width — «полка не шире метра». min-width — «полка не уже 30 см». max-height — «стопка книг не выше полуметра».

**Самый простой:**

.container {
  max-width: 1200px;
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

.text {
  max-width: 65ch;
}

Базовые ограничения: контейнер, картинки, текст.

**Простой:**

/* Карточка с фиксированной шириной */
.card {
  width: 300px;
  min-height: 200px;
}

/* Адаптивная карточка */
.card-responsive {
  width: 100%;
  max-width: 400px;
  min-height: 180px;
}

/* Full-screen секция */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ограничение формы */
input[type="text"] {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem;
}

Практические размеры: карточки, hero-секция, формы.

**Реальный пример:**

/* Адаптивная сетка */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

/* Статья с ограничением ширины */
.article {
  width: min(90%, 800px);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4rem);
}

/* Скроллируемый блок */
.code-block {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
}

/* Картинка с object-fit */
.avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

Современные размеры: min(), clamp(), overflow, object-fit.

**Неправильно:** Не использовать max-width для контейнеров

**Почему:** Без max-width текст растягивается на весь экран — нечитаемо на wide monitors.

**Правильно:** Контейнеры: max-width: 1200px (или min(90%, 800px)) + margin: 0 auto.

**Неправильно:** Забывать height: auto для картинок

**Почему:** Без height: auto картинка может растянуться или сжаться непропорционально.

**Правильно:** img { max-width: 100%; height: auto; } — базовые правила для картинок.

**Неправильно:** Использовать width: 100% вместо max-width: 100%

**Почему:** width: 100% = 100% ширины родителя (всегда). max-width: 100% = не больше 100% (может быть меньше).

**Правильно:** Для адаптивности: max-width: 100% (не выходит за контейнер).

• max-width: 100% для картинок — базовое правило
• max-width: 1200px для контейнеров — читаемость
• min-height для одинаковой высоты карточек
• width: auto ≠ width: 100%
• min(), clamp() — современные ограничения

Назад: Вы знаете display (C9) — размеры определяют, сколько пространства занимают элементы.

Вперёд: В следующем уроке (C11) вы изучите overflow и видимость: что делать, когда контент выходит за границы контейнера.