Обычный поток и display

Почему одни элементы идут друг под другом, другие внутри строки и как это меняет display.

также в веб-дизайне и основах веб-разработки

Браузер размещает элементы даже без ваших CSS-правил. Заголовки и абзацы идут друг под другом, а выделенные слова и ссылки остаются внутри текста. Такое размещение по порядку документа называют обычным потоком.

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

В обычной странице с горизонтальным текстом:

Поведение	Как располагается	Примеры без изменения CSS
Блочное	Начинает новую строку. При автоматической ширине обычно занимает доступную ширину родителя	`div`, `p`, `h1`
Строчное	Продолжает текущую строку. При нехватке места текст переносится	`span`, `a`, `strong`

Это описание поведения коробок на странице. Смысл тега не меняется от CSS: ссылка с display: block остается ссылкой.

Свойство `display`

display меняет то, как элемент участвует в размещении. Переключайте значение ниже. У трех span одинаковые стили, меняется только display:

display

Первый Второй Третий

Каждый элемент начинает новую строку, даже если справа есть место.

index.html

<span class="item">Первый</span><span class="item">Второй</span><span class="item">Третий</span>

styles.css

.item {  display: block;  width: 100px;  height: 44px;  padding: 4px;  margin: 4px;  box-sizing: border-box;  border: 1px solid #2563eb;  background: #dbeafe;  color: #172554;  vertical-align: top;}

Значение	Новая строка перед элементом	Работают `width` и `height`
`block`	Да	Да
`inline`	Нет	У обычного текстового элемента нет
`inline-block`	Нет, пока хватает места	Да

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

Изображения и поля ввода ведут себя иначе, чем текстовый span: браузер может задавать им размеры и внутри строки. Не переносите ограничение текстового inline на все элементы подряд.

Что будет с соседями

В потоке следующий блок располагается после предыдущего. Если в первом абзаце станет больше текста, он вырастет по высоте и сдвинет второй вниз. Это полезное поведение: страница приспосабливается к содержимому.

Ширина блока сама по себе не ставит соседний блок справа. Даже два блока шириной 100px будут идти друг под другом. Для меню, колонок и карточек далее используем Flexbox и Grid.

`flex` и `inline-flex`

У контейнера есть два отдельных вопроса: как он стоит среди соседей и как размещает своих детей.

display: flex создает блочный контейнер с Flexbox внутри.
display: inline-flex создает строчный контейнер с тем же Flexbox внутри. При автоматической ширине он обычно подстраивается под содержимое.

Дети в обоих случаях получают правила Flexbox. Подробно эти правила разберем в соответствующей статье; сейчас важно отличать размещение самого контейнера от размещения его содержимого.

Скрытие элемента

display: none убирает элемент и его место из раскладки. Соседи занимают освободившееся пространство. Такое скрытое содержимое обычно недоступно и скринридерам.

visibility: hidden скрывает элемент, но сохраняет его место. Это другое свойство, полезное, когда размер страницы нужно оставить прежним.

Подробнее: блочное и строчное размещение на MDN и справочник display.