Загрузка...

Inline-block в CSS

Прошлый урок картографировал повседневные значения display. Здесь вы тренируете гибрид: inline-block. Соседи должны оставаться в одной строке, когда есть место — как текст — и при этом нужна настоящая коробка, которая уважает width, height и padding. Это и есть задача.

Сравнение рядом

📊 Inline vs inline-block vs block

Режим	Поведение строки	Width / height / padding
`inline`	Сидит в текстовой строке	Width/height обычно игнорируются; padding может выглядеть странно
`inline-block`	Остаётся в строке, если есть место	Width, height и padding работают как у блока
`block`	Начинается на своей строке	Полная блочная модель; часто заполняет ширину ряда

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

Чип с размером, который всё ещё делит строку

В отличие от чистого inline, чип может сохранять padding и фиксированную ширину, сидя рядом с другими чипами.

Чип с размером

css

.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}

Простая панель инструментов

Несколько элементов одинаковой ширины могут сидеть в одном ряду. Разделяйте их margin. Для спокойной панели этого хватает до прихода Flexbox.

Панель inline-block

css

.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}

Вертикальное выравнивание в строке

Боксы строчного уровня могут иметь разную высоту рядом с текстом или изображениями. vertical-align сдвигает их — middle спокойный выбор для пар иконка+подпись.

Выровнять с текстом

css

.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}

.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}

Ловушка пробельного зазора

Браузеры считают пробелы и переносы между тегами текстовыми узлами. Между двумя соседями inline-block этот крошечный пробел становится видимым зазором. Это не Flexbox-gap — это остаточный HTML-whitespace.

Увидеть зазор

css

/* HTML вроде:
<span class="tile">A</span>
<span class="tile">B</span>
оставляет зазор из-за переноса. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}

Как успокоить зазор: теги в одну строку без пробела, закомментировать перенос или осторожно дать небольшой отрицательный margin. Позже Flexbox даёт более чистый интервал — не заставляйте каждый ряд вечно через inline-block.

Спокойная привычка inline-block

Общий класс для элементов ряда. Размер — намеренно. Whitespace чините, только если зазор мешает. Не собирайте целые макеты страницы вложенными inline-block — так возвращается боль эпохи float. У position и float свои уроки.

Общий класс элемента

css

.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}

Попробуйте сами

Сделайте три .chip с inline-block, фиксированной шириной и padding — смотрите, как делят строку.
Соберите панель .tool из четырёх кнопок равной ширины с margin-right.
Поставьте маленький .icon рядом с .label и попробуйте vertical-align: middle.
Двух соседей .tile — на разных строках HTML, затем на одной — сравните зазор.
Напишите предложение: когда хватает inline-block, а когда ждёте Flexbox?

Частые ошибки

Ждать, что чистый inline будет чтить width / height как настоящий блок
Винить CSS в «загадочном зазоре», который на деле HTML-whitespace между тегами
Строить весь многоколоночный макет страницы через inline-block
Считать этот урок широким обзором display (block / none) из прошлого
Прыгать к рецептам position или float вместо освоения гибрида

Итог

inline-block сидит в строке как текст, но сохраняет настоящую блочную модель для размера и padding
Удобен для чипов, компактных панелей и пар иконка+подпись
vertical-align помогает выровнять соседей разной высоты
Whitespace между тегами может дать видимый зазор — знайте причину
Для сложных рядов и чистых зазоров позже придёт Flexbox; держите inline-block осознанным

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык