Урок 35. Свойство display в CSS

📝

Внимание! На этой странице вы найдете материал урока из архивного курса по CSS. Курс был написан в 2015 и по-прежнему актуален для начинающих веб-разработчиков.

Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.

Полный список уроков доступен по тегу Архивный курс по CSS и на странице первого урока.

📋 Задание

Скройте заголовок h1 при помощи свойства display.

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

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

none - Временно скрывает элемент. Страница генерируется так, словно этого элемента не существует.
block - Элемент отображается как блочный. Если мы его применим для элемента <span>, то он отобразится как блок.
inline - Элемент показывается как строчный. Для элемента <div> будет отменен перенос строки до и после блока, т.е. элемент будет отображаться как строчный.
inline-block - Внутренняя часть элемента формируется как блок, а внешняя, как строка. То есть элемент будет обтекаться другими элементами. Так работает элемент <img>.
inline-table - Элемент становится таблицей и обтекается другими элементами.
inline-flex - Строчный. Ведет себя согласно флекс-модели.
flex - Блочный. Ведет себя согласно флекс-модели.
list-item - Блочный. Добавляется маркер списка.
run-in - Элемент становится блочным или строчным в зависимости от контекста.
table - Элемент становится блочной таблицей.
table-caption - Задает заголовок таблицы. Аналог <caption>.
table-cell - Ячейка таблицы.
table-column - Колонка таблицы.
table-column-group - Группа колонок таблицы.
table-footer-group - Футер таблицы.
table-header-group - Шапка таблицы.
table-row - Строка таблицы.
table-row-group - Несколько строк таблицы.

📝

Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу CSS.

Урок 36. Свойство margin для установки отступов в CSS