Загрузка...

Высота и ширина в CSS

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

Что делают width и height?

width управляет горизонтальным размером. height — вертикальным. Обычные значения используют длины вроде px или относительные размеры вроде %. Если их не трогать, многие элементы берут размер из содержимого и контекста вёрстки.

Фиксированный размер в пикселях

Понятный повседневный старт: дайте панели точную ширину (и при желании высоту) в пикселях.

Фиксированная ширина в пикселях

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

Ширина и высота вместе

Когда дизайну нужен чёткий прямоугольник — рамка миниатюры, плитка, слот медиа — задайте оба.

Ширина и высота на плитке

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

Процентная ширина

Ширина % обычно относится к ширине содержащего блока (часто родителя). width: 50% значит «примерно половина ширины родителя», а не волшебная половина экрана.

Половина ширины родителя

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

Инструменты размера одним взглядом

Помимо простых width и height CSS даёт ограничители.

📊 Инструменты ширины и высоты

Инструмент Роль Повседневная заметка
width / height Предпочтительный размер content-box Начните здесь для фиксированных или гибких размеров
min-width / min-height Не сжиматься ниже Кнопки или сайдбары остаются usable
max-width / max-height Не расти выше Смягчить огромные изображения или широкий текст
auto Пусть браузер посчитает Высота по умолчанию часто следует содержимому
% Относительно содержащего блока % ширины обычен; % высоты нуждается в заданной высоте родителя

min-width как пол

Полезно, когда коробка должна оставаться usable даже при сжатой вёрстке.

Пол минимальной ширины

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

max-width как потолок

Классическая привычка для читаемого текста или изображений, которые не тянутся бесконечно на больших экранах.

Потолок максимальной ширины

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

Высота часто остаётся auto

Для текстовых блоков пусть высота растёт с содержимым. Очень маленькая фиксированная высота может обрезать текст, если не планировать overflow (поздний урок).

Высота auto следует содержимому

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* растёт с абзацами */
padding: 1rem;
border: 1px solid #cbd5e1;
}

Попробуйте сами

  1. Панель с width: 320px и видимыми padding/границей.
  2. Плитка 160×120 с шириной и высотой.
  3. Потомок с width: 50% внутри более широкого родителя; измените размер родителя.
  4. Добавьте кнопке min-width: 12rem и сузьте viewport.
  5. Текстовому блоку дайте max-width: 40rem и height: auto — затем очень маленькую фиксированную высоту и риск обрезки.

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

  • height: 50% без явной высоты родителя (процент может не сделать ожидаемое)
  • Короткий height на текстовой коробке и удивление обрезанным содержимым
  • Забыть max-width на больших изображениях или длинных строках
  • Путать width (размер content-box) с padding (внутренняя подушка)
  • Считать, что width всегда включает границу и padding — зависит от box-sizing (скоро)

Кратко

  • width и height задают размер content-box
  • px для фиксированных размеров, % для гибкой ширины относительно родителя
  • min-* и max-* ставят пол и потолок
  • Предпочитайте height: auto для растущего текста
  • Процентная высота нужна родителю с заданной высотой
  • Полный счёт коробки — в следующих уроках box model

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
9
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок