display

Общая информация

Свойство, определяющее как будет отображаться элемент в документе. Очень часто используется при создании динамических элементов, когда надо показать/скрыть информацию.

Синтаксис и значения

По умолчанию имеет значение inline. Не наследуется.

display: inline || inline-block || block || none || inline-table || list-item || table || table-caption || table-row || table-cell || table-column-group || table-column || table-footer-group || table-header-group || flex || table-row-group

Несмотря на длинный список значений, кроссбраузерными являются не все. Основными будут inline, block, none. Остальные следует использовать с осторожностью.

Значение Описание
none Элемент не отображается, отсутствует в потоке документа. Занимаемое место не резезрвируется. Документ рендерится так, будто элемента нет в коде.
block Задает элементу свойства блочного элемента, обтекание, выравнивание и т.д.
inline Элементу присваиваются свойства инлайновых элементов.
inline-block Блочный элемент, который обтекается другими элементами как встроенный (например img)

inline-table

Элемент принимает свойства тега <table>, поддается обтеканию, как встроенный элемент
list-item Блочный элемент с маркером
table Элемент присваиваются свойства блочной таблицы
table-caption Соответствует тегу заголовка таблицы, как <caption>
table-cell Элементу присваиваются свойства ячейки таблицы, как <td>
table-row Элементу присваиваются свойства столбца таблицы, как <tr>
table-row-group Используется как родитель нескольких строк таблицы, примерно как <tbody>

форматирование

Добавить комментарий

Имя*
Ответ*