Сетки / Погружение в inline-block [28/32]
×
Курс «Сетки»

Погружение в inline-block [28/32]

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

Блочно-строчные элементы ведут себя двояко. Снаружи они выглядят как обычные строчные, но внутри они ведут себя как блочные.

От строчных им достались следующие черты:

  • по ширине они ужимаются под своё содержимое;
  • могут располагаться в одну строку;
  • реагируют на вертикальное выравнивание, vertical-align;
  • реагируют на горизонтальное выравнивание, text-align, заданное у родителя.

От блочных:

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

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Погружение в inline-block</title> <meta charset="utf-8"> <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="block"> Блок 1<br> Высота средняя </div> <div class="block"> Блок 2<br> Высота больше среднего </div> <div class="block"> Блок 2<br> Низкий </div> </div> </body> </html>
CSS
body { font-family: "PT Sans", sans-serif; } .container { width: 400px; padding: 10px; margin: 20px auto; box-shadow: 0 0 2px #cccccc; } .block { width: 70px; margin: 10px 5px; padding: 10px; color: white; background: #3498db; border: 2px solid #34495e; }
HTML Academy
  1. Задайте элементам с классом block блочно-строчный тип.
  2. Затем задайте контейнеру горизонтальное выравнивание текста по центру,
  3. а блокам выравнивание текста по левому краю.
  4. Задайте блокам вертикальное выравнивание посередине: middle.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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