CSS - Display » Pechenek.NET

Сегодня мы разберемся как можно контролировать слои экрана с помощью свойства display в CSS. В прошлой статье мы уже говорили о развитии и продолжении обучающих материалов по таблицам стилей. Сегодня мы этим и займемся.

CSS — Display

Display в css это многоцелевое свойство, определяющее как должен отображаться элемент в документе. Прежде всего необходимо помнить, что не все атрибуты поддерживаются всеми подряд браузерами. По умолчания свойство display имеет значения inline. В таком случае элемент отображается как встроенный:

Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент. Мы применили свойство display: inline ко второму блоку и из-за особенности значения блок «схлопнулся».

1. Display — block

Свойство заставляет теги, например span заставляет вести его себя подобно блокам. В конце и в начале содержимого создает перенос строки:

Span со свойством display:block.
Добавим немного текста для наглядности.
Span без свойства display

Обратите внимание, что в первом случае отступы снизу и сверху больше.

2. Display — inline-block

Это свойство генерирует блок, который обтекается другими элементами подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный:

Div со свойством inline

Div со свойством inline-block

3. Display — inline-table

Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
Span со свойством inline-tableТекст после блока inline-table.

4. Display — list-item

Свойство определяет элемент как блочный и добавляет к нему маркер:

p style=»display: list-item; border: 1px solid black;»

5. Display — none

Это свойство убирает элемент со страницы таким образом, будто его никогда не было.

Ниже представлены еще несколько атрибутов свойства display:

run-in	Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table	Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption	Задает заголовок таблицы подобно применению тега <caption>.
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column	Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group	Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row	Элемент отображается как строка таблицы (тег <tr>).
table-row-group	Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

Пожалуй на этом можно закончить. Спасибо за внимание, не забывайте про канал и группу в ВК!