Загрузка...

Display в CSS

display отвечает на спокойный вопрос: как этот блок входит в страницу? Одни складываются полными блоками; другие сидят внутри предложения; некоторые можно полностью убрать из макета. Этот урок картирует повседневные значения — и оставляет глубокую практику inline-block на следующий сеанс.

Набор для display

📊 Display одним взглядом

Значение Повседневная роль
block Начинается на своей строке; часто заполняет ширину ряда
inline Живёт в текстовой строке; width/height обычно игнорируются
inline-block Сидит в строке как текст, но принимает width/height/padding как блок
none Убирает элемент из макета (пространство схлопывается)
flex / grid Мощные режимы вёрстки — позже, не здесь

HTML по умолчанию уже выбирает display для многих тегов (div — block, span — inline, button часто почти inline-block). CSS позволяет переопределить это, когда потоку нужна другая роль.

Block — своя строка, просторный блок

Блочные боксы начинаются с новой строки и обычно берут доступную ширину. Заголовки, абзацы и div ведут себя так по умолчанию.

Принудительный block

css
CSS Code 
.badge {
display: block;
width: 12rem;
padding: 0.5rem 0.75rem;
background: #e8f0ff;
}

Inline — внутри предложения

Строчные боксы сидят в текстовом потоке и переносятся вместе со словами. Задавать width или height чистому inline обычно бесполезно — поэтому переходят к block или inline-block.

Принудительный inline

css
CSS Code 
.note-label {
display: inline;
color: #0b5fff;
font-weight: 600;
}

Inline-block — короткий взгляд

inline-block держит соседей в одной строке, когда есть место, но всё же уважает width, height и padding. Вы тщательно потренируете это в следующем уроке; здесь просто узнайте гибрид.

Взгляд на inline-block

css
CSS Code 
.chip {
display: inline-block;
padding: 0.35rem 0.7rem;
border: 1px solid #c5c5c5;
border-radius: 999px;
}

None — выйти из макета

display: none скрывает элемент и схлопывает его место. Макет и многие вспомогательные средства считают его отсутствующим. Предпочитайте переключатель класса разрозненным правилам.

Скрыть через none

css
CSS Code 
.is-hidden {
display: none;
}

visibility: hidden — другая история: блок всё ещё может резервировать место. Этот урок остаётся с display: none для реального удаления из макета. Visibility здесь не разбираем.

Спокойная привычка для display

Меняйте display по причинам потока — не ради косметики кнопок (прошлый урок) и не как ярлык для каждой задачи вёрстки (flex/grid позже). Называйте намеренные состояния классами.

Классы показать и скрыть

css
CSS Code 
.panel {
display: block;
padding: 1rem;
border: 1px solid #ddd;
}

.panel.is-hidden {
display: none;
}

Сравнить три режима

css
CSS Code 
.demo-block { display: block; background: #e8f0ff; margin: 0.25rem 0; }
.demo-inline { display: inline; background: #fff3cd; }
.demo-ib { display: inline-block; width: 6rem; background: #d8f5e7; }

Попробуйте сами

  1. Сделайте span как display: block и дайте width + padding.
  2. Сделайте короткий div (или заголовок) display: inline и посмотрите в предложении.
  3. Добавьте .chip с inline-block — заметьте, что width/padding работают.
  4. Скройте панель через .is-hidden { display: none; } и переключайте класс.
  5. Напишите фразу: когда block, когда inline для метки?

Частые ошибки

  • Ожидать, что width / height сработают на чистом inline
  • Ставить display: none, когда хотели лишь приглушить вид — и забывать, что место схлопывается
  • Считать этот урок оболочками hover кнопок (это был Buttons)
  • Сваливать сюда рецепты Flexbox/Grid вместо четырёх базовых значений
  • Путать «скрыто из макета» с более глубоким уроком inline-block следом

Кратко

  • display управляет тем, как блок входит в поток страницы
  • block берёт свою строку; inline живёт в тексте
  • inline-block — гибрид; практика дальше
  • none убирает элемент и его место из макета
  • Меняйте display для задач потока; сложную вёрстку оставьте на потом

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 35 из 35
Css Урок