Сетки / inline-block и пробелы в коде [31/32]
×
Курс «Сетки»

inline-block и пробелы в коде [31/32]

Мы рассчитали всё правильно, однако по три товара в строку не помещается.

Причина заключается в пробелах после тэгов в HTML-коде. Блочно-строчные ведут себя как текст, поэтому если в коде есть пробел между элементами, то он отображается и на странице. Этот пробел увеличивает отступы между товарами, не давая им поместиться в одну строку.

Бороться с пробелом после блочно-строчных можно несколькими способами:

  • удалять пробелы в коде;
  • обнулять размер шрифта;
  • играться с маргинами после блочно-строчного.

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

Мы попробуем последние два способа.

Способ со шрифтом заключается в том, что мы задаём нулевой размер шрифта у контейнера инлайн-блоков, а самим инлайн-блокам задаём исходный размер шрифта. Способ не работает, если вы используете относительные размеры шрифта.

Способ с маргинами заключается в том, что мы уменьшаем отступ после инлайн-блока на ширину пробела, около 4-5px. А если нам нужно, чтобы элементы стояли вплотную друг к другу, то задаём отрицательный отступ. Проблема с этим способом заключается в том, что размер пробела может быть разным в разных шрифтах и может изменяться при изменении размера шрифта.


Выполнить задание
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"> <h1>Каталог в три колонки</h1> <div class="catalog"> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> <div class="item">Товар</div> </div> </div> </body> </html>
CSS
body { font-size: 16px; font-family: "PT Sans", sans-serif; } h1 { margin: 0; margin-bottom: 0.5em; font-size: 18px; } .container { width: 400px; margin: 20px auto; } .catalog { width: 400px; background: #ecf0f1; box-shadow: 0 0 3px #999999; } .item { display: inline-block; width: 116px; min-height: 75px; margin-bottom: 20px; margin-right: 20px; vertical-align: top; text-align: center; color: white; background: #3498db; border: 2px solid #2c3e50; } .item:nth-child(3n) { margin-right: 0; }
HTML Academy
  1. 1 способ: задайте для .catalog нулевой размер шрифта,
  2. а для .item размер шрифта 16px.
  3. 2 способ: верните .catalog размер шрифта 16px и уменьшите у .item маргин справа до 15px.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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