CSS свойство display | назначение, допустимые значения, примеры

Свойство display определяет, как элемент должен быть показан в документе.

Допустимые значения

• inline — элемент ведет себя как строчный (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• block — элемент ведет себя как блочный (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• none — «удаляет» элемент со страницы вместе с содержимым. Элемент не видим, на странице блоки располагаются так, словно элемента нет (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• list-item — ведет себя как элемент списка (аналогично тегу li) — становится блочным элементом с маркером (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• run-in — элемент ведет себя как строчный или блочный в зависимости от контекста (поддерживается IE8, Opera 9 и выше, Safari)
• compact — элемент ведет себя как строчный или блочный в зависимости от контекста (поддерживается Opera 9 и выше)
• inline-block — элемент ведет себя как строчный, но внутреннее форматирование происходит как у блочного (поддерживается IE, Opera, Safari)
• table — элемент ведет себя как таблица (тег table) (поддерживается Opera, Safari, Netscape, FF, Chrome)
• inline-table — элемент ведет себя как таблица и строчный элемент одновременно (поддерживается Opera 9+, Safari)
• table-row-group — элемент ведет себя как тег tbody (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-header-group — элемент ведет себя как тег thead (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-footer-group — элемент ведет себя как тег tfoot (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-row — элемент ведет себя как тег tr (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-column-group — элемент ведет себя как тег colgroup (поддерживается Opera 9+, Safari, Netscape, FF, Chrome)
• table-column — элемент ведет себя как тег col (поддерживается Opera 9+, Safari, Netscape, FF, Chrome)
• table-cell — элемент ведет себя как тег td (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-caption — элемент ведет себя как тег caption (поддерживается Opera, Safari, Netscape, FF, Chrome)
• inherit — наследует значение от родителя

Пример

Заметки

По теме:

• inline-block: простое свойство для непростых задач
• Блочные элементы. Особые приметы
• Выравнивание навигации из блоков по центру
• Центрирование резинового блока по горизонтали
• Выравнивание навигации по середине