Главная/ Cправочник HTML, CSS, Javascript/ CSS справочник/ Свойства CSS для улучшения дизайна сайта/ CSS свойство display | назначение, допустимые значения, примеры

Свойство display

Последнее обновление: 05.01.2011

Свойство 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
Применимо ко всем элементам
Наследование нет
Версия CSS CSS 1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример


div {
display: inline;
}

Заметки

По теме:

Теги: ,