Блочная модель документа / display: inline-block [18/23]
×

display: inline-block [18/23]

Иногда возникает необходимость расположить в ряд несколько элементов с заданными размерами. Строчные элементы для этого не подходят, т.к. не воспринимают размеры. Блочные элементы тоже не подходят, т.к. до и после них существует перенос строки. Конечно, блочные элементы можно приспособить для такой задачи, используя дополнительные свойства (которые будут разбираться в курсе про сетки).

Но более простой способ — использовать блочно-строчные элементы. В HTML нет тегов, которые по умолчанию вели бы себя как блочно-строчные, но любой элемент можно переключить в данный режим, задав ему свойство display со значением inline-block.

Особенности блочно-строчных элементов:

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>display: inline-block</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="column column-1"> Блок 1 </div> <div class="column column-2"> Блок 2 </div> <div class="column column-3"> Блок 3 </div> </body> </html>
CSS
body { padding: 20px; } .column { margin-bottom: 20px; margin-right: 20px; padding: 10px; } .column-1 { height: 36px; } .column-2 { height: 56px; } .column-3 { height: 76px; }
HTML Academy

Измените элементы с классом column:

  1. Добавьте свойство display: inline-block;.
  2. Добавьте свойство vertical-align: bottom;.
  3. Задайте ширину 100px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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