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

Свойство display — одно из важнейших свойств CSS. Оно определяет, как элемент участвует в потоке раскладки: создаёт ли он блочный блок, строчный блок или промежуточный вариант.

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

Блочные элементы по умолчанию: div, p, h1-h6, section, article.

Строчные элементы располагаются внутри текста. Они не начинаются с новой строки. Задание width или height не влияет на них. Верхние и нижние внешние отступы игнорируются, а горизонтальные внешние и внутренние отступы работают.

Строчные элементы по умолчанию: span, a, strong, em, img.

display: inline-block — гибридный вариант. Элементы располагаются в строке, без принудительного переноса, но поддерживают ширину, высоту и все свойства блочной модели, как блочные элементы.

До появления флексбокса inline-block использовался для горизонтальных панелей навигации. Недостаток этого подхода в том, что пробелы в исходном коде HTML создают небольшие промежутки между элементами.

Промежуток между строчно-блочными элементами можно удалить, задав font-size: 0 для родителя и восстановив размер шрифта у дочерних элементов либо удалив пробелы из HTML.

В современном CSS предпочтительный способ создавать горизонтальные раскладки без проблем с пробелами — задать родителю display: flex. inline-block по-прежнему полезен для задания размеров отдельных элементов.

Тип display любого элемента можно изменить с помощью CSS. Это часто используют, чтобы придать ссылкам форму кнопок или расположить элементы списка горизонтально.

CSS предоставляет значения display: table, display: table-row, display: table-cell и т. д., позволяющие применить табличную раскладку к элементам, не являющимся таблицами. Сегодня это требуется редко, но бывает полезно для вертикального выравнивания в устаревших сценариях.

display: flow-root создаёт новый контекст форматирования блоков без побочных эффектов overflow: hidden. Он очищает обтекание и не позволяет схлопыванию внешних отступов выходить за пределы контейнера.

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

Какое значение display позволяет задать width, сохраняя элемент в строчном потоке?

Блочные элементы занимают всю ширину и начинаются с новой строки. Строчные элементы располагаются вместе с текстом и игнорируют ширину и высоту. Строчно-блочные элементы объединяют оба свойства: располагаются в строке, но принимают ширину и высоту. В современных раскладках вместо сеток из inline-block предпочтительны флексбокс и грид.