Свойство display в CSS

Определение и использование

Свойство display определяет тип рамки, которую элемент создает.

Описание

Эта свойство используется для определения типа рамки, которую элемент создает при создании макета. Для типов документов, таких как HTML, неосторожное использование display может быть опасным, так как может нарушить иерархию отображения, уже определенную в HTML. Для XML, так как XML не имеет встроенной иерархии этого типа, display является абсолютно необходимым.

Комментарий:В CSS2 есть значения compact и marker, но из-за отсутствия широкой поддержки они были удалены из CSS2.1.

См. также:

Урок CSS:Позиционирование CSS

Руководство по HTML DOM:Свойство display

Пример

Создание в тексте отступа в строке:

p.inline
  {
  display:inline;
  }

Попробуйте сами

Грамматика CSS

display: value;

Значение свойства

Значение Описание
none Этот элемент не будет отображаться.
block Этот элемент будет отображаться как блочный элемент, перед и после элемента будет перевод строки.
inline По умолчанию. Этот элемент будет отображаться как inline-элемент, перед и после элемента не будет перевода строки.
inline-block Внутренний блочный элемент. (Добавлен в CSS2.1)
list-item Этот элемент будет отображаться как список.
run-in Этот элемент будет отображаться в зависимости от контекста как блочный элемент или.inline-элемент.
compact В CSS есть значение compact, но из-за отсутствия широкого поддержки оно было удалено из CSS2.1.
marker В CSS есть значение marker, но из-за отсутствия широкой поддержки оно было удалено из CSS2.1.
table Этот элемент будет отображаться как блочная таблица (аналог <table>), перед и после таблицы есть строки.
inline-table Этот элемент будет отображаться как инлайн-таблица (аналог <table>), перед и после таблицы нет строки.
table-row-group Этот элемент будет отображаться как группа строк (аналог <tbody>).
table-header-group Этот элемент будет отображаться как группа строк (аналог <thead>).
table-footer-group Этот элемент будет отображаться как группа строк (аналог <tfoot>).
table-row Этот элемент будет отображаться как строка таблицы (аналог <tr>).
table-column-group Этот элемент будет отображаться как группа столбцов (аналог <colgroup>).
table-column Этот элемент будет отображаться как строка столбца (аналог <col>).
table-cell Этот элемент будет отображаться как ячейка таблицы (аналог <td> и <th>).
table-caption Этот элемент будет отображаться как заголовок таблицы (аналог <caption>).
inherit Указывается, что значение свойства display должно быть получено от родительского элемента.

Технические детали

по умолчанию: inline
Инheritability: нет
Версия: CSS1
JavaScript синтаксис: объект.style.display="inline"

Пример TIY

Как показать элемент как.inline-элемент
Этот пример демонстрирует, как показать элемент как.inline-элемент.
Как показать элемент как блочный элемент
Этот пример демонстрирует, как показать элемент как блочный элемент.

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот свойство.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Комментарий:Если задан !DOCTYPE, то Internet Explorer 8 (и более поздние версии) поддерживают значения свойств "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" и "inherit".