Display и поток документа

display — свойство, которое определяет, как элемент отображается. block — занимает всю ширину, переносит строку. inline — работает внутри текста, не переносит строку. inline-block — гибрид. none — скрывает элемент. normal flow — стандартное расположение элементов (блочные сверху вниз, строчные слева направо).

Типы display:

block:

• Занимает всю ширину родителя
• Начинает новую строку
• На padding/margin/width/height реагирует
• Примеры: div, p, h1-h6, section, article

inline:

• Занимает только ширину содержимого
• НЕ переносит строку
• Width/height НЕ работают!
• Примеры: span, a, strong, em

inline-block:

• Внешне — inline (внутри текста)
• Внутри — block (width/height работают!)
• Полезно для иконок в тексте, кнопок

display: none:

• Полностью убирает элемент из layout
• Не занимает место
• Отличие от visibility: hidden (скрывает, но место сохраняет)

flex и grid:

• Создают flex/grid контекст для дочерних элементов
• Подробно изучим в следующих уроках

Normal flow:

• Стандартное расположение: блочные — сверху вниз, строчные — слева направо
• Выход из normal flow: position (absolute, fixed), float, display: flex/grid

Display — как тип «попутчика» в поезде. block — занимает целое купе (строку). inline — садится рядом с другими (внутри строки). inline-block — садится рядом, но занимает место (width/height работают).

**Самый простой:**

div { display: block; }      /* По умолчанию */
span { display: inline; }     /* По умолчанию */

/* Скрываем элемент */
.hidden { display: none; }

/* Делаем inline элемент блочным */
a {
  display: inline-block;
  width: 150px;
  padding: 8px;
  text-align: center;
}

Базовые display-значения и превращение inline в inline-block.

**Простой:**

/* Горизонтальное меню */
nav ul {
  display: flex;
  list-style: none;
  gap: 1rem;
}

/* Кнопки-ссылки */
.nav-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  border: 1px solid #333;
  border-radius: 4px;
}

/* Скрытие на мобильных */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { width: 100%; }
}

Flex для меню, inline-block для кнопок, none для адаптива.

**Реальный пример:**

/*visibility vs display */
.collapsed {
  display: none; /* Не занимает место */
}

.invisible {
  visibility: hidden; /* Занимает место, но невидим */
}

/* Паттерн: показ/скрытие */
.menu-toggle:checked ~ .nav {
  display: flex;
}

/* Flex-контейнер */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Grid-контейнер */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Inline-flex для иконок в тексте */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: #e3f2fd;
  border-radius: 999px;
  font-size: 0.875rem;
}

visibility vs display, flex/grid контейнеры, inline-flex. Это пример будущих тем: flexbox (C13), grid (C15) и псевдоклассы вроде :checked (C17).

**Неправильно:** Ставить width/height на inline-элементы

**Почему:** Inline-элементы ИГНОРИРУЮТ width/height. Это не работает!

**Правильно:** Для width/height на строчных элементах используйте display: inline-block.

**Неправильно:** Путать display: none и visibility: hidden

**Почему:** display: none — элемент исчезает и не занимает место. visibility: hidden — невидим, но место сохраняет.

**Правильно:** Нужно место → visibility: hidden. Нужно убрать → display: none.

**Неправильно:** Использовать float для раскладки

**Почему:** Float — устаревший способ. Modern layout: flexbox (1D), grid (2D).

**Правильно:** Для раскладки — flexbox или grid. Float — только для обтекания текста вокруг картинки.

• Block: вся ширина, новая строка
• Inline: ширина содержимого, width/height НЕ работают
• Inline-block: inline + block (width/height работают)
• display: none — скрывает без места
• Flex/grid — современная альтернатива float для раскладки

Назад: Вы знаете margin и padding (C8) — display определяет, как элементы занимают пространство.

Вперёд: В следующем уроке (C10) вы изучите размеры элементов: width, height, min/max и стратегии задания размеров.