Урок 16. Примеры: display и поток документа

Рабочие примеры

В каждом примере сверху реальный результат, ниже — CSS/HTML. Идём от простого к сложному.

1. block: каждый элемент с новой строки

Блочные элементы укладываются столбиком и занимают всю доступную ширину.

.box {
  display: block;     /* по умолчанию у div */
  padding: .5rem .75rem;
}
/* каждый .box — на новой строке, во всю ширину */

2. inline: элементы в строку, размеры игнорируются

Строчным элементам нельзя задать width/height — они подстраиваются под текст.

.tag {
  display: inline;
  width: 200px;   /* игнорируется! */
}
/* элементы стоят в строку, ширина — по содержимому */

3. inline-block: в строку, но с размерами

Гибрид: остаётся в строке, но принимает width, height и вертикальные отступы. Идеален для бейджей и кнопок-ссылок.

.tag {
  display: inline-block;
  width: 90px;
  padding: 0.4em 0.8em;
  margin: 0.25rem;
  border-radius: 999px;
  background: #e0f2fe;
}

4. flex: контейнер распределяет детей

Одно свойство display: flex у контейнера — и дети выстраиваются в гибкую строку с равными промежутками.

.row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.row > div { flex: 1; }   /* равная ширина */

5. none против visibility: hidden

Слева блок убран через display: none (места нет), справа спрятан через visibility: hidden (место осталось — видна «дырка»).

.gone     { display: none; }       /* нет в раскладке */
.invisible { visibility: hidden; }  /* место сохранено */