Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Обсуждение
Теория урока

Свойство display

Свойство display применяется часто и нужно оно для определения того, как будет показан элемент в документе. Далее его синтаксис:

Код CSS
display: none | block | inline | inline-block | inline-table |
inline-flex | flex | list-item |
run-in | table | table-caption | table-cell |
table-column-group | table-column |
table-footer-group | table-header-group | table-row |
table-row-group
  1. none - Временно скрывает элемент. Страница генерируется так, словно этого элемента не существует.
  2. block - Элемент отображается как блочный. Если мы его применим для элемента <span>, то он отобразится как блок.
  3. inline - Элемент показывается как строчный. Для элемента <div> будет отменен перенос строки до и после блока, т.е. элемент будет отображаться как строчный.
  4. inline-block - Внутренняя часть элемента формируется как блок, а внешняя, как строка. То есть элемент будет обтекаться другими элементами. Так работает элемент <img>.
  5. inline-table - Элемент становится таблицей и оптекается другими элементами.
  6. inline-flex - Строчный. Ведет себя согласно флекс-модели.
  7. flex - Блочный. Ведет себя согласно флекс-модели.
  8. list-item - Блочный. Добавляется маркер списка.
  9. run-in - Элемент становится блочным или строчным в зависимости от контекста.
  10. table - Элемент становится блочной таблицей.
  11. table-caption - Задает заголовок таблицы. Аналог <caption>.
  12. table-cell - Ячейка таблицы.
  13. table-column - Колонка таблицы.
  14. table-column-group - Группа колонок таблицы.
  15. table-footer-group - Футер таблицы.
  16. table-header-group - Шапка таблицы.
  17. table-row - Строка таблицы.
  18. table-row-group - Несколько строк таблицы.
<
×
>
Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.