Display в css что это: display

Содержание

display | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	2.0+	7.0+	1.0+	1.0+	2.1+	1.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень
короткий — block, inline,
list-item и none.
Все остальные допустимые значения поддерживаются браузерами выборочно. В табл. 1
приведены некоторые популярные браузеры и их поддержка различных значений.

Табл. 1. Поддержка браузерами значений display
Значение	Описание	IE6	IE7	IE8	Cr2	Cr8	Op9.2	Op10	Sa3.1	Sa5	Fx3	Fx4
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table	Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item	Элемент выводится как блочный и добавляется маркер списка.
none	Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
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>.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>display</title>
  <style>
   .example {
    border: dashed 1px #634f36; /* Параметры рамки */
    background: #fffff5; /* Цвет фона */
    font-family: "Courier New", Courier, monospace; /* Шрифт текста */
    padding: 7px; /* Поля вокруг текста */
    margin: 0 0 1em; /* Отступы вокруг */
   }
   .exampleTitle {
    border: 1px solid black; /* Параметры рамки */
    border-bottom: none; /* Убираем линию снизу */
    padding: 3px; /* Поля вокруг текста */
    display: inline; /* Устанавливаем как встроенный элемент */
    background: #efecdf; /* Цвет фона */
    font-weight: bold; /* Жирное начертание */
    font-size: 90%; /* Размер текста */
    margin: 0; /* Убираем отступы вокруг */
    white-space: nowrap; /* Отменяем переносы текста */
   }
  </style>
 </head> 
 <body> 
  <p>Пример</p>
  <p>
  &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
  &lt;html&gt;<br>
  &lt;body&gt;<br>
  &lt;b&gt;Формула серной кислоты:&lt;/b&gt;
  &lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
  SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
  &lt;/sub&gt;&lt;/i&gt;<br>
  &lt;/body&gt;<br>
  &lt;/html&gt;</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

[window.]document.getElementById(«elementID»).style.display

Браузеры

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
для элементов <li> понимает значение block как list-item;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для тега <col>;
значение table-column-group поддерживается только для тега <colgroup>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Свойство display | CSS справочник

CSS свойства

Определение и применение

CSS свойство display определяет как должен отображаться определенный элемент HTML.

Поддержка браузерами

Браузер Internet Explorer 8 требует наличия декларации !DOCTYPE в документе.

CSS синтаксис:

display:"inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit";

JavaScript синтаксис:

object.style.display = "block"

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

Значение	Описание
inline	Элемент отображается как строчный (inline) элемент (например — <span>). Это значение по умолчанию.
block	Отображает элемент как блочный элемент (например — <h2> ).
flex	Элемент отображается как блочный flex-контейнер.
grid	Элемент отображается как блочный grid-контейнер.
inline-block	«Блочно-строчные» элементы — позволяет задавать размеры, рамки, отступы, как и блочным элементам, ширина зависит от содержания (не растягивается на всю ширину контейнера), выравниваются вертикально как и строчные элементы.
inline-flex	Элемент отображается как строчный flex-контейнер.
inline-grid	Элемент отображается как строчный grid-контейнер.
inline-table	Определяет, что элемент является таблицей, но при этом встраивается в другие элементы, а не является блочной таблицей (элемент обтекает другими элементами).
list-item	Элемент ведет себя как элемент списка — <li>.
table	Элемент ведет себя как блочная таблица — <table>.
table-caption	Элемент ведет себя как наименование таблицы — <caption>.
table-column-group	Элемент ведет себя как группа столбцов — <colgroup>.
table-header-group	Элемент ведет себя как «шапка таблицы» — <thead>.
table-footer-group	Элемент ведет себя как «подвал таблицы» — <tfoot>.
table-row-group	Элемент ведет себя как «тело таблицы» — <tbody>.
table-cell	Элемент ведет себя как ячейка таблицы — <td>.
table-column	Элемент ведет себя как часть группы столбцов — <col>.
table-row	Элемент ведет себя как строка таблицы — <tr>.
none	Элемент не будет отображаться в документе (под него не резервируется место на странице).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Использование блочно-строчных элементы</title>
<style> 
div {
	display : inline-block; /* элементы будут отображаться как "блочно-строчные" */
	width : 200px; /* задаём ширину блока */
	background-color : orange; /* задаём цвет заднего фона */
	text-align : center; /* выравниваем текст по центру внутри элементов  */
	background-color : 3px solid green; /* задаём для элементов сплошную границу зелёного цвета размером 3px */
	margin-bottom : 10px; /* устанавливаем внешний отступ снизу от элементов */
}
</style>
</head>

Свойство display

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

Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.

Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.

Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.

Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.

Таблица 1. Значения свойства display
display
Значения:
`inline`	Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег `<span>`.
`block`	Элемент генерирует структурный блок, как и тег `<div>`.
`flex`	Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов.
`inline-block`	Элемент генерирует строковый блок.
`inline-flex`	Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов.
`inline-table`	Элемент определяет структурный блок, который генерирует строковый блок.
`list-item`	Элемент генерирует структурный блок, который отображается как элемент списка `<li>`.
`table`	Элемент генерирует структурный блок. На странице ведет себя аналогично `<table>`.
`table-caption`	Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично `<caption>`.
`table-column`	Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — `<col>`.
`table-column-group`	Элемент объединяет один или несколько столбцов. Аналог — `<colgroup>`.
`table-cell`	Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично `<th>` и `<td>`.
`table-header-group`	Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — `<thead>`.
`table-footer-group`	Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично `<tfoot>`.
`table-row-group`	Элемент объединяет одну или несколько строк. Аналог — `<tbody`.
`table-row`	Элемент является строкой ячеек. Пример — `<tr>`.
`none`	Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.
`inherit`	Наследует свойство от родительского элемента.

display | CSS | WebReference

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

Краткая информация

Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

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

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

block: Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline: Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block: Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
inline-table: Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
inline-flex: Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
flex: Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
list-item: Элемент выводится как блочный и добавляется маркер списка.
none: Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
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>.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>display</title>
<style>
.example {
border: dashed 1px #634f36; /* Параметры рамки */
background: #fffff5; /* Цвет фона */
font-family: «Courier New», Courier, monospace; /* Шрифт текста */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em; /* Отступы */
}
.exampleTitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как строчный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер текста */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Отменяем переносы текста */
}
</style>
</head>
<body>
<p>Пример</p>
<p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>
<html><br>
<body><br>
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>
SO<sub><small>4</small>
</sub></i><br>
</body><br>
</html></p>
</body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства display

Объектная модель

Объект.style.display

Примечание

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для элементов <thead> и <tfoot>;
для элементов <li> понимает значение block как list-item;
значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для <col>;
значение table-column-group поддерживается только для <colgroup>.

Chrome до версии 4, а также Safari до версии 5:

значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Chrome 32

Значение run-in больше не поддерживается.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


none, inline, block	4	12	1	7	1	1
inline-block	5.5	12	1	7	1	3
inline-flex, flex	11	12	29	17	9	28
list-item	6	12	1	7	1	1
run-in	8	12	1	7	1
inline-table	8	12	1	7	1	3
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption	8	12	1	7	1	1


none, inline, block	1	1	8	1
inline-block	1	1	8	1
inline-flex, flex	4.4	28	12.1	9.2
list-item	1	1	8	1
run-in	1		8	1
inline-table	1	1	8	1
table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption	1	1	8	1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 27.08.2017

Редакторы: Влад Мержевич

display | CSS справочник

Поддержка браузерами


12.0+	8.0+	3.0+	4.0+	7.0+	3.1+

Описание

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

Обратите внимание, что по умолчанию в CSS все элементы являются строчными (display:inline). Для переопределения варианта отображения элемента со строчного на блочный, браузеры используют встроенную таблицу стилей, задающую для каждого элемента стили, применяемые к нему по умолчанию. В старых версиях браузеров используется устаревшая встроенная таблица стилей, в которой нет правил для переопределения новых элементов, добавленных в HTML5, в блочные. Поэтому, для таких элементов как <section>, <header>, <nav>, <article>, <aside> и <footer>, способ отображения должен быть задан вручную в таблице стилей:


<style>
  section, header, nav, article, aside, footer { display: block; }
</style>

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

Все типы элементов, которые имеют разрыв строки до и после элемента относятся к элементам блочного уровня. Все остальные элементы относятся к элементам строчного уровня.

Значение по умолчанию:	inline
Применяется:	ко всем элементам
Анимируется:	нет
Наследуется:	нет
Версия:	CSS1
Синтаксис JavaScript:	object.style.display=»inline»

Синтаксис

display: значение;

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

Значение	Описание
none	Элемент исключается из общего потока, он не отображается на экране и под него не резервируется место на странице ( все элементы ведут себя как обычно, как будто этот элемент отсутствует в исходном коде).
block	Элемент воспринимается браузером, как блочный (например, как <div>), т.е. имеет разрыв строки до и после элемента и занимает всю доступную ширину. Появляется возможность применения свойств для блочных элементов.
inline	Элемент будет отображаться, как строчный (например, как <span>), содержимое блочных элементов, к которым было применено данное значение, будет начинаться с того места, где окончился предыдущий строчный элемент.
inline-block	Элемент отображается, как строчный, но появляется возможность применять к нему свойства, доступные только блочным элементам (например: margin, padding).
list-item	Элемент становится блочным и отображается, как элемент списка (тег <li>) с маркером перед началом содержимого.
table	Определяет блочный элемент, который ведёт себя как <table>.
table-caption	Элемент ведёт себя как <caption>.
table-cell	Элемент ведёт себя как <td>.
table-column	Элемент ведёт себя как <col>.
table-column-group	Элемент ведёт себя как <colgroup>.
table-footer-group	Элемент ведёт себя как <tfoot>.
table-header-group	Элемент ведёт себя как <thead>.
table-row	Элемент ведёт себя как <tr>.
table-row-group	Элемент ведёт себя как <tbody>.
flex	Преобразует элемент в блочный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами. Примечание: появляется возможность пользоваться следующими свойствами:
inline-flex	Преобразует элемент в строчный flex-контейнер. Все дочерние элементы данного контейнера автоматически становятся flex-элементами.
inline-table	Элемент будет вести себя как <table>, но не как блочный, а как строчно-блочный. То есть значение inline-table эквивалентно следующему CSS правилу: table { display: inline-block;}
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

A span element.
mySpan.
Another span element.

span#mySpan {
background-color: red;
display: inline;
}

display в CSS | Учебные курсы

Мы уже видели, что есть в основном два типа элементов HTML: блочные и строчные элементы. Мы также упомянули несколько альтернативных, вроде list-item или table-cell.

Свойство display позволяет изменять тип элемента HTML. По умолчанию для абзаца <р> (блочный элемент) значение display будет block, но может отображаться как inline:

p { display: inline; }

Почему бы не использовать строчные элементы, такие как <span>?

Потому что вы выбираете элемент HTML по его смыслу, а не отображению. Если мы решили, что абзац подходит нашему содержимому лучше всего, мы не должны менять тег ради стилизации. Это CSS заботится о стилизации.

Короче говоря, display позволяет сменить тип элемента без изменения его смысла.

Для каждого варианта display есть определённое поведение:

block будет занимать всю доступную ширину;
inline будет действовать как обычный текст;
inline-block является, как предполагает его название, соединением блочного и строчного поведения, вариант «лучшее из обоих миров»;
list-item похож на block, так как он занимает всю доступную ширину, но показывает дополнительный маркер пункта списка;
у table, table-row и table-cell очень специфическое, хотя и неожиданное поведение, которое позволяет строить более интересные макеты.

display: block

Превратит любой элемент в блочный.

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

CSS

.menu a { background: red; color: white; }

HTML

<ul>
  <li>
    <a>Главная</a>
  </li>
  <li>
    <a>Возможности</a>
  </li>
  <li>
    <a>Цены</a>
  </li>
  <li>
    <a>О нас</a>
  </li>
</ul>

Если превратить эти ссылки в блочные, мы увеличим их область:

.menu a { background: red; color: white; display: block; }

display: inline

Превращает любой элемент в строчный, как если бы он был только простым текстом.

Часто используется для создания горизонтальной навигации, где семантически, но не визуально полезны пункты списка.

CSS

.menu li { display: inline; }

HTML

<ul>
  <li>
    <a>Главная</a>
  </li>
  <li>
    <a>Возможности</a>
  </li>
  <li>
    <a>Цены</a>
  </li>
  <li>
    <a>О нас</a>
  </li>
</ul>

display: list-item

Элементы HTML, отображаемые как list-item, являются (неудивительно) пунктами списка <li>, но также описанием термина <dd>.

Пункт списка отображается с маркером (в неупорядоченном списке <ul>) или с порядковым номером (в упорядоченном списке <ol>).

Поскольку отображение этих маркеров и цифр меняется во всех браузерах, также трудно стилизовать их в CSS, правило display: list-item никогда не используется. На самом деле, часто <li> отображаются как display: block или display: inline, так как они более гибкие для стилизации.

display: none

Применение display: none к элементу HTML удаляет его из веб-страницы, как если бы он никогда не существовал в вашем коде.

CSS

.gone-baby-gone { display: none; }

HTML

<p>Я слышал кто-то выступает?</p>
<p>Ха-ха-ха</p>
<p>Я, должно быть, сплю...</p>

Здесь в коде три абзаца, но видны только два, как будто второго человека никогда не существовало.

visibility: hidden

Свойство visibility немного похоже на display. Применение visibility: hidden скрывает элемент со страницы, но только делает его невидимым: он по-прежнему занимает место, где только что был.

CSS

.hollow-man { visibility: hidden; }

HTML

<p>So far away from me </p>
<p>So far i just can't see</p>
<p>So far away from me</p>
<p>You're so far away from me</p>
<p>You're so far away...</p>

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

CSS3 | Свойство display

Свойство display

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

Кроме свойства float, которое позволяет изменять позицию элемента, в CSS есть еще одно важное свойство — display.
Оно позволяет управлять блоком элемента и также влиять на его позиционирование относительно соседних элементов.

Это свойство может принимать следующие значения:

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

block: элемент становится блочным, как параграф

inline-block: элемент располагается как строка текста

list-item: элемент позиционируется как элемент списка обычно с добавление маркера виде точки или порядкового номера

run-in: тип блока элемента зависит от окружающих элементов

flex: позволяет осуществлять гибкое позиционирование элментов

table, inline-table: позволяет расположить элементы в виде таблицы

none: элемент не виден и удален из разметки html

Итак, значение block позволяет определить блочный элемент.
Такой элемент визуально отделяется от соседних элементов переносом строки, как, например, элемент параграфа p или элемент div, которые по умолчанию являются
блочными и при визуализации веб-страницы визуально переносятся на новую строку.

Однако элемент span в отличие от элемента div блочным не является. Поэтому посмотрим, какие с ним произойдут изменения при применении значения
block:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<link href="styles.css" rel="stylesheet">
        <title>Свойство display в CSS3</title>
		<style>
			span{
				color: red;
			}
			.blockSpan{
				display: block;
			}
		</style>
    </head>
    <body>
		<div>Это <span>строчный</span> элемент span</div>
		<div>Это <span>блочный</span> элемент span</div>
    </body>
</html>

Здесь определено два элемента span, но один из них является блочным, так как к нему применяется стиль display: block;. Поэтому этот элемент
span переносится на новую строку.

В отличие от блочных элементов строчные встраиваются в строку, так как имеют для свойства display значение inline. Элемент
span как раз по умолчанию имеет стиль display: inline, поэтому и встраивается в строку, а не переносится на следующую, как параграфы или div.
И теперь произведем обратную процедуру — сделаем блочный элемент div строчным:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			div{
				display: inline;
			}
		</style>
    </head>
    <body>
		<div>Первый строчный элемент div.</div>
		<div>Второй строчный элемент div.</div>
    </body>
</html>

Следует учитывать, что при применении значения inline браузер игнорирует некоторые свойства, такие как width, height, margin.

inline-block

Еще одно значение — inline-block — представляет элемент, который обладает смесью признаков блочного и строчного элементов.
По отношению к соседним внешним элементам такой элемент расценивается как строчный. То есть он не отделяется от соседних элементов переводом строки.
Однако по отношению к вложенным элементам он рассматривается как блочный. И к такому элементу применяются свойства width, height,
margin.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			span{
				width: 100px;
				height: 30px;
				background-color: #aaa;
			}
			.inineBlockSpan{
				display: inline-block;
			}
		</style>
    </head>
    <body>
		<p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
		<p>Проехав с полверсты в хвосте <span>колонны</span>, он остановился</p>
    </body>
</html>

Первый элемент span является строчным, у него значение inline, поэтому для него бессмысленно применять свойства width и
height. А вот второй элемент span имеет значение inline-block, поэтому к нему жуе применяются и ширина, и высота, и
при необходимости еще можно установить отступы.

run-in

Значение run-in определяет элемент, который зависит от соседних элементов. И здесь есть три возможных варианта:

Элемент окружен блочными элементами, тогда фактически он имеет стиль display: block, то есть сам становится блочным

Элемент окружен строчными элементами, тогда фактически он имеет стиль display: inline, то есть сам становится строчным

Во всех остальных случаях элемент считается блочным

Табличное представление

Значение table по сути превращает элемент в таблицу. Посмотрим на примере списка:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			ul{
				display: table;
				margin: 0;
			}
			li{
				list-style-type: none;
				display: table-cell;
				padding: 10px;
			}
		</style>
    </head>
    <body>
		<ul>
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
    </body>
</html>

Здесь список превращается в таблицу, а каждый элемент списка — в отдельную ячейку. Для этого у элемента списка устанавливается стиль display: table-cell.
Фактически вместо этого списка мы могли бы использовать стандартную таблицу.

Сокрытие элемента

Значение none позволяет скрыть элемент, которого как-будто нет на веб-странице:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Свойство display в CSS3</title>
		<style>
			.invisible{
				display: none;
			}
		</style>
    </head>
    <body>
		<p>Первый параграф</p>
		<p>Второй параграф</p>
		<p>Третий параграф</p>
    </body>
</html>

CSS свойство отображения

Пример

Использование различных отображаемых значений:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

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

Свойство отображения определяет поведение отображения
(тип окна рендеринга) элемента.

В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В
значение по умолчанию в XML является встроенным, включая элементы SVG.

Значение по умолчанию:	?
Унаследовано:	нет
Анимируемое:	нет. Прочитать о animatable
Версия:	CSS1
Синтаксис JavaScript:	объект .style.display = «нет» Попробуй это

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

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

Имущество
дисплей	4,0	8,0	3,0	3,1	7.0

Примечание: Для значений «flex» и «inline-flex» для работы в Safari требуется префикс -webkit-.

Примечание. «display: contents» не работает в Edge / Internet Explorer.

Синтаксис CSS

Стоимость недвижимости

Значение Описание Играй

рядный Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта Играй »

блок

Отображает элемент как блочный (например,

). Это начинается на
новая строка и занимает всю ширину

Играй »

содержание Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами
элемент на следующий уровень в DOM Играй »

гибкий Отображает элемент как гибкий контейнер на уровне блока Играй »

сетка Отображает элемент как контейнер сетки на уровне блока Играй »

рядный блок Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный
элемент, но вы можете применить значения высоты и ширины Играй »

рядный гибкий Отображает элемент как гибкий контейнер встроенного уровня Играй »

рядная сетка Отображает элемент как контейнер сетки встроенного уровня Играй »

встроенный стол Элемент отображается как таблица встроенного уровня Играй »

элемент списка

Пусть элемент ведет себя как элемент

Играй »

обкатка Отображает элемент как блочный или встроенный, в зависимости от контекста Играй »

стол

Пусть элемент ведет себя как элемент


Играй »
заголовок таблицы	Пусть элемент ведет себя как элемент
Играй »
таблица-столбец-группа	Пусть элемент ведет себя как элемент
Играй »
таблица-заголовок-группа	Пусть элемент ведет себя как элемент
Играй »
нижний колонтитул группы	Пусть элемент ведет себя как элемент
Играй »
таблица-строка-группа	Пусть элемент ведет себя как элемент
Играй »
таблица-ячейка	Пусть элемент ведет себя как элемент		Играй »
таблица-столбец	Пусть элемент ведет себя как элемент
Играй »
стол-ряд	Пусть элемент ведет себя как элемент
Играй »
нет	Элемент полностью удален	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию.Читать примерно начальная	Играй »
наследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Другие примеры

Пример

Демонстрация использования значения свойства contents. В следующих
Например, контейнер .a исчезнет, а дочерние элементы (.b)
дочерние элементы элемента на следующий уровень в DOM:

.дисплей {
: содержание;
граница:
2px сплошной красный;
цвет фона: #ccc;
отступ: 10 пикселей;
ширина: 200 пикселей;
}

.b {
граница: сплошной синий цвет 2 пикселя;
цвет фона: светло-голубой;
отступ: 10 пикселей;
}

Попробуй сам »

Пример

Демонстрация того, как использовать значение наследуемого свойства:

body {
display: встроенный;
}

p {
display: наследование;
}

Попробуй сам »

Пример

Установить направление некоторых гибких элементов внутри элемента

в обратном направлении
заказ:

div {
дисплей: гибкий;
flex-direction: ряд-реверс;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: Отображение CSS и
видимость

Ссылка на HTML DOM: свойство отображения

.Макет

CSS — Свойство отображения

Свойство display является наиболее важным свойством CSS для управления макетом.

Свойство отображения

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

Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа
элемента это. Значение отображения по умолчанию для большинства элементов — , блок или
рядный .

Щелкните, чтобы показать панель

Эта панель содержит элемент

, который по умолчанию скрыт (отображение : нет ).

Он оформлен с помощью CSS, и мы используем JavaScript для его отображения (измените его на ( display: block ).

Элементы блочного уровня

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину
(тянется влево и вправо, насколько это возможно).

Элемент

— это элемент уровня блока.

Примеры блочных элементов:

—
<форма>
<заголовок>
<нижний колонтитул>
<раздел>

Встроенные элементы

Встроенный элемент не начинается с новой строки, а занимает необходимую ширину.

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

Примеры встроенных элементов:

Дисплей: нет;

дисплей: нет; обычно используется с JavaScript, чтобы скрыть
и отображать элементы, не удаляя и не создавая их заново. Взгляните на наш последний
пример на этой странице, если вы хотите знать, как этого можно достичь.

Элемент

Display в css что это: display | htmlbook.ru

display | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Свойство display | CSS справочник

Определение и применение

Поддержка браузерами

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

Версия CSS

Наследуется

Анимируемое

Пример использования

Свойство display

display | CSS | WebReference

Краткая информация

Синтаксис

Обозначения

Значения

Пример

Объектная модель

Примечание

Спецификация

Браузеры

Браузеры

Автор и редакторы

display | CSS справочник

Поддержка браузерами

Описание

Синтаксис

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

Пример

display в CSS | Учебные курсы

Почему бы не использовать строчные элементы, такие как <span>?

display: block

display: inline

display: list-item

display: none

visibility: hidden

CSS3 | Свойство display

Свойство display

inline-block

run-in

Табличное представление

Сокрытие элемента

CSS свойство отображения

Пример

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

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

Синтаксис CSS

Стоимость недвижимости

Другие примеры

Пример

Пример

Пример

Связанные страницы

CSS — Свойство отображения

Свойство отображения

Элементы блочного уровня

—

Встроенные элементы

Дисплей: нет;