Блочная модель документа / Ширина и высота [3/23]
×

Ширина и высота [3/23]

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

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

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

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

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

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

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

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина и высота</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="example">Блочные элементы по умолчанию занимают всю доступную ширину. Их высота зависит от содержания.</div> <div><span class="example">Размеры строчных элементов полностью зависят от их содержания и с помощью CSS не изменяются.</span></div> </body> </html>
CSS
div { margin: 20px; padding: 10px; } .example { }
HTML Academy
  1. Задайте элементам с классом example ширину 116px и
  2. высоту 116px.

Обратите внимание на «выпадание» текста и поведение тега span.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.