CSS display — block, inline, flex, grid, none

display — одно из ключевых CSS свойств. Оно определяет, как элемент участвует в потоке документа: занимает ли всю строку, встраивается в текст, или превращается в гибкий flex/grid контейнер.

display: block — блочный элемент

Блочный элемент занимает всю доступную ширину родителя и начинается с новой строки. По умолчанию блочные: div, p, h1–h6, ul, li, section, article.

div { display: block; }

/* Характеристики block: */
/* ✅ Занимает всю ширину родителя (если не задана width) */
/* ✅ Начинается с новой строки */
/* ✅ Можно задать width и height */
/* ✅ Все margin и padding работают */

/* Пример: сделать ссылку блочной (кнопка на весь ряд) */
.nav-link {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #374151;
}

.nav-link:hover {
  background: #f3f4f6;
}

display: inline — строчный элемент

Inline-элемент встраивается в текст и занимает только место под своё содержимое. По умолчанию строчные: span, a, strong, em, code.

span { display: inline; }

/* Характеристики inline: */
/* ✅ Не начинается с новой строки — встраивается в текст */
/* ✅ Занимает только место под содержимое */
/* ❌ width и height НЕ работают */
/* ⚠️  margin-top и margin-bottom НЕ работают */
/* ✅ margin-left и margin-right работают */
/* ✅ padding работает, но вертикальный может перекрывать соседей */

/* Пример: выделение ключевых слов */
.highlight {
  display: inline;
  background: #fef08a;
  padding: 0 4px;
}

display: inline-block — золотая середина

inline-block совмещает лучшее из двух миров: не начинается с новой строки (как inline), но поддерживает width, height и все отступы (как block).

.tag {
  display: inline-block;
  padding: 4px 12px;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 0.85rem;
}

/* Характеристики inline-block: */
/* ✅ Как inline: не начинается с новой строки */
/* ✅ Как block: работают width, height */
/* ✅ Все margin и padding работают */

/* Примеры использования */
.btn {
  display: inline-block;
  padding: 10px 24px;
  background: #2563eb;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}

/* Меню в строку (до flexbox это был стандарт) */
nav a {
  display: inline-block;
  padding: 8px 16px;
}

display: flex — гибкий контейнер

Flexbox — современный способ выстраивать элементы в строку или колонку с гибким управлением расстоянием и выравниванием. Подробно разобрано в отдельной статье про Flexbox.

.container {
  display: flex;
  gap: 16px;
  align-items: center;       /* по вертикали */
  justify-content: space-between; /* по горизонтали */
}

/* Частые паттерны с flex */

/* Центрировать что угодно */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Навбар: лого слева, меню справа */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

/* Карточки в ряд */
.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;  /* переносить на новую строку если не влезает */
}

/* display: inline-flex — flex-контейнер, но inline (не занимает всю строку) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

display: grid — сеточный контейнер

CSS Grid — двумерная раскладка: управляет и строками и столбцами одновременно. Идеален для крупных структур: сетки карточек, страницы с сайдбаром, дашборды.

/* Сетка карточек */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 равные колонки */
  gap: 20px;
}

/* Адаптивная сетка без медиазапросов */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Страница с сайдбаром */
.page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;  /* сайдбар + контент */
  grid-template-rows: auto 1fr auto; /* header + main + footer */
  min-height: 100vh;
}

display: none — скрыть элемент

display: none полностью убирает элемент из потока — как будто его нет в HTML. Место не занимается. Это отличает его от visibility: hidden и opacity: 0.

/* display: none — убрать из потока, место не занимает */
.hidden { display: none; }

/* visibility: hidden — скрыть визуально, место сохраняется */
.invisible { visibility: hidden; }

/* opacity: 0 — прозрачный, место занимает, события работают */
.transparent { opacity: 0; }

/* Частое использование: адаптивное меню */
.mobile-menu { display: none; }

@media (max-width: 768px) {
  .mobile-menu   { display: block; }
  .desktop-nav   { display: none; }
}

/* Показать/скрыть через JavaScript */
.modal { display: none; }
.modal.is-open { display: flex; }

Таблица всех значений display

Сравнение: none, visibility: hidden, opacity: 0

/* Плавное появление через opacity + visibility */
.tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}
/* visibility: hidden убирает клики при opacity:0 */
/* Плавная анимация через opacity */

Часто задаваемые вопросы о CSS display

display: block vs inline-block — в чём разница?

block — занимает всю строку (ширину родителя), следующий элемент всегда начинается на новой строке. inline-block — занимает только место под содержимое, несколько таких элементов могут стоять в одной строке. Оба поддерживают width, height и все отступы. Пример: кнопки в строку делают через inline-block (или лучше через flex на родителе).

Как скрыть элемент в CSS?

Зависит от задачи: display: none — полностью убрать элемент, место не занимается (используй для скрытия меню, модалок). visibility: hidden — скрыть визуально, но место в layout сохраняется (редко нужно). opacity: 0 — прозрачный, место занимает, клики работают (используй для анимаций появления). Для анимированного скрытия обычно комбинируют: opacity: 0; visibility: hidden; transition: opacity 0.3s.

Когда использовать flex, а когда grid?

Flex — для одномерных раскладок: строка элементов (навбар, список кнопок, карточки в ряд). Flex управляет либо строками, либо колонками. Grid — для двумерных раскладок: сетки карточек, страницы со структурой (header/sidebar/main/footer). Grid управляет и строками и колонками одновременно. На практике часто используют оба: Grid для структуры страницы, Flex для выравнивания внутри компонентов.