CSS свойство display

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
display4.03.07.03.18.012.0

Значения "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row" и "table-row-group" не поддерживаются в IE7 и более ранних версиях, IE8 требует !DOCTYPE.
Для поддержки работы значений "flex" и "inline-flex" в браузере Safari необходимо использовать префикс производителя -webkit-.

CSS синтаксис:

display:"inline | block | flex | inline-block | inline-flex | inline-table | list-item | run-in | 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Отображает элемент как блочный элемент (например - <h1> ).
flexcss3Элемент отображается как блочный flex-контейнер.
inline-block"Блочно-строчные" элементы - возможность задавать размеры, рамки, отступы, как и блочным элементам, ширина зависит от содержания (не растягивается на всю ширину контейнера), выравниваются вертикально как и строчные элементы.
inline-flexcss3Элемент отображается как строчный flex-контейнер.
inline-tableОпределяет, что элемент является таблицей, но при этом встраивается в другие элементы, а не является блочной таблицей (элемент обтекает другими элементами).
list-itemЭлемент ведет себя как элемент списка - <li>.
run-inОтображает элемент как блочный, либо строчный в зависимости от контекста.
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> 
.panorama {
display : inline-block; /* элементы будут как "блочно-строчные" (для возможности в дальнейшем задать размер). */
}
div.test {
display : inherit; /* Наследуем "блочно-строчновость" (можно указать и inline-block) */
width : 200px; /* задаём ширину блока */
background-color : orange; /* задаём задний фон для элементов <div> данного класса */
text-align : center; /* выравниваем текст по центру внутри блоков  */
background-color : 3px solid green; /* задаём для блоков сплошную границу зелёного цвета размером 3px */
margin-bottom : 10px; /* делаем внешний отступ снизу от элементов блока   */
}
</style>
</head>
	<body>
		<div class = "panorama">
			<div class = "test">Блок 1</div>
			<div class = "test">Блок 2</div>
			<div class = "test">Блок 3</div>
			<div class = "test">Блок 4</div>
			<div class = "test">Блок 5</div>
			<div class = "test">Блок 6</div>
			<div class = "test">Блок 7</div>
			<div class = "test">Блок 8</div>
			<div class = "test">Блок 9</div>
			<div class = "test">Блок 10</div>
			<div class = "test">Блок 11</div>
			<div class = "test">Блок 12</div>
		</div>
	</body>
</html>
Пример адаптивных блоков.
Пример адаптивных блоков.
CSS свойства