Для чего нужен Display?

CSS свойство display и его назначение

display - это одно из самых важных CSS свойств. Оно определяет, как элемент должен быть отрендерен в документе, то есть как он участвует в потоке расположения (layout flow) страницы.

Основные значения display

1. display: block

/* Элемент занимает всю ширину родителя и начинает новую строку */
body, div, p, h1, section {
  display: block; /* По умолчанию для большинства блочных элементов */
}

<!-- Блочные элементы располагаются друг под другом -->
<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>

Характеристики:

• Занимает 100% ширины родителя
• Начинает новую строку
• Margin, padding и border работают полностью
• Высота и ширина можно задать

2. display: inline

/* Элемент занимает только столько места, сколько нужно */
a, span, strong, em {
  display: inline; /* По умолчанию для встроенных элементов */
}

<!-- Встроенные элементы располагаются в одну строку -->
<p>
  Это <span>встроенный</span> текст
  и <a href="#">ссылка</a> в одной строке.
</p>

Характеристики:

• Занимает только необходимую ширину
• Располагается в одну строку с другими inline элементами
• Вертикальный margin не работает
• Высоту и ширину установить нельзя
• Padding работает, но может перекрывать другие элементы

3. display: inline-block

/* Гибрид inline и block */
input, button, img {
  display: inline-block; /* По умолчанию для некоторых элементов */
}

<!-- Располагаются в одну строку, но можно задать размеры -->
<button>Кнопка 1</button>
<button>Кнопка 2</button>
<button>Кнопка 3</button>

Характеристики:

• Располагается в строку (как inline)
• Но можно задать ширину, высоту и вертикальный margin (как block)
• Очень полезно для выравнивания элементов в ряд

4. display: none

/* Элемент полностью скрыт и не занимает место */
.hidden {
  display: none;
}

/* Может быть полезно для адаптивного дизайна */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

Характеристики:

• Элемент не отображается
• Не занимает место в layout
• В отличие от visibility: hidden (которая скрывает, но оставляет место)

Современные значения display

5. display: flex

/* Гибкая система для одномерного макета (строка или столбец) */
.container {
  display: flex;
  flex-direction: row; /* или column */
  justify-content: space-between; /* выравнивание по горизонтали */
  align-items: center; /* выравнивание по вертикали */
  gap: 16px; /* расстояние между элементами */
}

<div class="container">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
  <div>Элемент 3</div>
</div>

Flexbox решает множество проблем классической вёрстки:

/* Идеальное центрирование (было долгой проблемой) */
.card {
  display: flex;
  justify-content: center; /* горизонтально */
  align-items: center;     /* вертикально */
  height: 200px;
}

/* Быстро выравнять элементы */
.header {
  display: flex;
  justify-content: space-between; /* logo слева, nav справа */
  align-items: center;
}

/* Адаптивная сетка */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-item {
  flex: 1 1 calc(33.333% - 10px); /* 3 колонки */
}

6. display: grid

/* Двумерная система для сложных макетов (строки и столбцы одновременно) */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 равные колонки */
  grid-template-rows: auto 1fr auto;   /* заголовок, содержимое, подвал */
  gap: 20px;
}

.header {
  grid-column: 1 / -1; /* занять всю строку */
}

.sidebar {
  grid-column: 1;
  grid-row: 2;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2;
}

Пример классического макета:

<div class="layout">
  <header>Заголовок</header>
  <aside>Боковая панель</aside>
  <main>Основной контент</main>
  <footer>Подвал</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* боковая панель и основной контент */
  grid-template-rows: auto 1fr auto; /* заголовок, содержимое, подвал */
  height: 100vh;
}

header { grid-column: 1 / -1; }
footer { grid-column: 1 / -1; }
aside { grid-row: 2; }
main { grid-row: 2; }

Сравнение display значений

// Визуально это выглядит так:

// display: block
// [Элемент занимает всю ширину]
// [Элемент занимает всю ширину]

// display: inline
// [Элемент] [Элемент] [Элемент]

// display: inline-block
// [Элемент] [Элемент] [Элемент]
// (но каждый имеет ширину/высоту)

// display: flex
// ┌─────────────────────┐
// │ Item1 Item2 Item3   │
// └─────────────────────┘
// (автоматическое выравнивание)

// display: grid
// ┌───────┬───────┬───────┐
// │ Cell1 │ Cell2 │ Cell3 │
// ├───────┼───────┼───────┤
// │ Cell4 │ Cell5 │ Cell6 │
// └───────┴───────┴───────┘

Практические примеры

Хедер с выравниванием

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f5f5f5;
}

.logo {
  font-weight: bold;
}

.nav {
  display: flex;
  gap: 16px;
}

.nav-link {
  text-decoration: none;
  color: #333;
}

Адаптивная карточка

.card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-title {
  margin-top: 12px;
  font-weight: bold;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  margin-top: auto; /* толкает footer вниз */
}

Проблемы и решения

/* Проблема: вертикальный margin collapses для блочных элементов */
.block1 { margin-bottom: 20px; }
.block2 { margin-top: 20px; }
/* Результат: 20px расстояния, не 40px */

/* Решение: используй flex */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Гарантированное расстояние */
}

Заключение

display - это основа CSS макетов:

• block - классический блочный элемент
• inline - встроенный элемент в текст
• inline-block - гибрид
• none - скрытие элемента
• flex - одномерные макеты (строки или столбцы)
• grid - двумерные макеты (сетки)

В современной вёрстке в основном используются flex и grid. Они решают 90% задач верстки и делают код чище и более поддерживаемым.