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

float vs inline-block

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

Поведение похоже на флоатные элементы, однако, есть существенное отличие.

При переносе на следующую строку блочно-строчные ведут себя намного логичней. Высота строк у них рассчитывается по максимальному элементу с учётом отступов.

Это упражнение создано, чтобы продемонстрировать отличие в поведении флоатов и инлайн-блоков. В исходном состоянии мы видим несколько флоатных блоков, которые не смогли выстроиться в ряды, так как зацепились друг за друга.

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

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

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

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

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

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

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

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