Блочные и строчные элементы

display: block, inline, inline-block и flow-root: как всегда «строчки» и «кирпичи», где менять поток и что даёт контекст форматирования.

Уровень: начальный 10 разделов 1,5 часа

1. Три базовых display

Свойство display решает, как элемент ведёт себя в потоке. Блок (block) занимает всю ширину родителя и переносит строку, строчный (inline) течёт внутри текста, inline-block — строчка с размерами как у блока.

display	Ширина	Перенос строки	width/height	margin/padding
block	вся ширина родителя	да	работают	работают
inline	по содержимому	нет	не работают	горизонтальные — да, вертикальные — нет
inline-block	по содержимому	нет	работают	работают

Самая частя ошибка новичков — задавать width и margin-top строчному тегу (span, a, img). Они не работают, пока элемент не станет block или inline-block.

2. Классика: block

div, p, h1–h6, ul, li, section — блочные по умолчанию. Их ставят один под другим, ширина растягивается, между ними схлопываются вертикальные margin. Блочные элементы — «кирпичи» набора страницы.

.card { display: block; }        /* как есть по умолчанию */

/* главная карточка: сузили и центрировали по горизонтали */
.card {
  display: block;
  width: 640px;
  margin-left: auto;
  margin-right: auto;
}

class наследует оба «строю»: задайте блочному элементу display: inline — и он встанет в строку текста, но потеряет размеры, list-style и переносы абзацев. Меняйте display осознанно.

3. Текстовый поток: inline

span, a, em, strong, img, button, input — строчные. Они лежат внутри строки, высота подстраивается под шрифт, переносы строк игнорируются. Вертикальные paddings и margins не двигают соседей.

<p>Цвет <span class="hl">выделен</span> в тексте.</p>

.hl {
  display: inline;          /* по умолчанию */
  background: #e0f2fe;
  padding: 0 4px;           /* горизонтальные отступы работают */
}

Пробел вокруг строчного элемента на самом деле — это пробел в тексте, а не отступ. Поэтому у inline-block соседей появляется «щелбан» в пару пикселей (white-space между ними). В grid/flex этой проблемы нет.

4. comp: inline-block

inline-block — компромисс: течёт в строке, но имеет размеры, поля и рамку со всех сторон. Классика — маленькие кнопки-чипы в строке и колонки «в старом стиле».

.chip {
  display: inline-block;
  padding: 4px 12px;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: 999px;
}

<span class="chip">HTML</span>
<span class="chip">CSS</span>

элементы с inline-block ложатся в строку через пробелы;
пробел между ними можно удалить выравниванием font-size: 0 у родителя;
вёрстка колонок через inline-block — устаревшая, лучше flex-grid.

5. Почему display:none v hidden

display: none полностью убирает элемент из потока и доступности, а visibility: hidden прячет визуально, сохраняя место и (часто) читаемость для скринридера. Чье место нужно скрыть — выбирают по нужде.

.legacy { display: none; }      /* нет ни места, ни элемента */
.hint { visibility: hidden; }  /* место есть, не видно */

/* гибко: строка-секрет из раскрывающегося меню */
.menu__secret { visibility: hidden; }

6. Скрытие без исчезновения

display: none — убрать совсем;
visibility: hidden — оставить место, скрыть глазами;
opacity: 0 — скрыть, но обработчики кликов работают (аккуратно);
в a11y-контекстах для скрытий не используйте display:none без причины.

Практическая ловушка: видимость, не удаляющая место, ломает раскладку соседей. Если скрываете секцию, но место остаётся — вы, вероятно, использовали visibility вместо display.

7. flow-root

display: flow-root создаёт контекст форматирования блока, внутри которого margin не схлопывается и невозможно выйти «поплавком» (float) наружу. Простой и честный способ «обнять» детей.

.group {
  display: flow-root;      /* схлопывание margin отключено внутри */
  background: #f8fafc;
}

/* раньше это делали через overflow: hidden + clearfix */

flow-root — современная замена float-clearfix. Пара слов в рекомендациях: если блок «вылезает» из родителя из-за margin детей — добавьте flow-root или возьмите за правило через grid/flex, где схлопывания нет.

8. display: none в адаптивных интерфейсах

Главная задача мобильной версии — показывать не всё. Меню-«гамбургер» держит пункты спрятанными (display: none) и раскрывает по классу; декоративные блоки скрываются на маленьком экране.

.nav__list { display: none; }       /* мобильная версия */

.nav--open .nav__list { display: block; }  /* развернули */

@media (min-width: 768px) {
  .nav__list { display: flex; }            /* широкий экран */
  .nav__burger { display: none; }          /* бургер убрали */
}

9. Какой display выбирать

раскладка элементов в строку/колонку с размерами — flex или grid (не inline-block);
текстовая строчка внутри абзаца — inline;
само кнопка-«таблетка» в потоке текста — inline-block;
блок страницы (корточка, секция) — block по умолчанию;
«обнять» произвольный контейнер с блочными детьми — flow-root.

Практическое правило: flex и grid — для сетки, а block/inline/inline-block — для семантики и текстовых вставок. Не заставляйте каждый элемент «склеиваться» через inline-block.

10. Чек-лист

для блочного элемента работают height/margin-top — для строчного нет;
inline-block не «схватывает» вертикальные поля соседей;
пробелы между inline-block лечатся font-size: 0 или grid/flex;
скрытие выбирается по месту: display=none или visibility=hidden;
flow-root охватывает детей и гасит их margin;
меню-и-блоки на мобильных прячут display, а не opacity.

Что дальше

Курс завершён.

← Вернуться к курсам