• Теория
  • Теория

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

Ширина и высота боксов задаются с помощью свойств width и height соответственно.

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

Высота по умолчанию блочных боксов зависит от их содержимого. Если задать блочному боксу ширину и высоту так, что содержимое не будет в него помещаться, то оно как бы «выпадет» из него.

Строчные боксы не реагируют на задание ширины и высоты в CSS.

Задать ширину элементу можно, например, так:

.selector {
  width: 100px;
  height: 100px;
}

Вернуть значения по умолчанию можно с помощью специального значения auto:

.selector {
  width: auto;
  height: auto;
}

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. До 29 апреля цена 21 900 ₽22 900 ₽

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Блочная модель документа» тренажёра «Боксовая модель и позиционирование» можно после регистрации и оформления подписки.