CSS :: Свойство display

css-свойство display (от англ. display – отображение) устанавливает тип элемента, тем самым определяя, как элемент будет отображаться браузером в документе.

Характеристики

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

Синтаксис

Значения

block – элемент будет отображаться как блочный, в результате браузер начнет добавлять разрывы строк до и после элемента, при этом сам элемент будет занимать всю доступную в данной ситуации шириную, а высота элемента будет формироваться его содержимым.
inline – элемент будет отображаться как строчный, в результате браузер будет считать его частью строки, а ширина элемента будет формироваться его содержимым.
inline-block – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства блочных элементов, например, можно будет задавать отступы и размеры.
inline-table – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства элемента «table», т.е. значение предназначено для изменения формата обтекания таблицы соседними элементами.
inline-flex – элемент будет вести себя в общем потоке как строчный флекс-элемент.
flex – элемент будет вести себя в общем потоке как блочный флекс-элемент.
list-item – элемент будет отображаться как блочный, а перед его содержимым будет добавлен маркер списка.
none – элемент удаляется из общего потока, а все элементы ведут себя так, как-будто он отсутствует не только на странице, но и в исходном коде.
run-in – элемент будет вести себя как блочный или строчный в зависимости от контекста.
table – элемент будет отображаться как таблица.
table-caption – элемент будет отображаться как заголовок таблицы.
table-cell – элемент будет отображаться как ячейка таблицы.
table-column – элемент будет отображаться как колонка таблицы, как будто он является элементом «col».
table-column-group – элемент будет отображаться как группа колонок таблицы, как будто он является элементом «colgroup».
table-footer-group – элемент будет отображаться как нижняя часть таблицы, как будто он является элементом «tfoot».
table-header-group – элемент будет отображаться как заголовочная часть таблицы, как будто он является элементом «thead».
table-row – элемент будет отображаться как строка таблицы.
table-row-group – элемент будет отображаться как группа строк таблицы, как будто он является элементом «tbody».

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visuren.html#propdef-display

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/display

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div, span{
		color: green;
		border: solid 2px blue;
		width: 200px;
		}
		
	</style>
	
</head>
<body>
	
	<span>
		По умолчанию элемент «span» является строчным элементом.
	</span>
	
	<div>
		По умолчанию элемент «div» является блочным элементом.
	</div><br>
	
	<div style="display: inline">
		Теперь элемент «div» стал строчным элементом и его ширина 
		определяется содержимым.
	</div><br><br>
	
	<span style="display: block">
		Теперь элемент «span» стал блочным элементом.
	</span><br>
	
	<div style="display: inline">Первый строчный «div».</div>
	
	<div style="display: inline-block">inline-block «div»</div>
	
	<div style="display: inline">Второй строчный «div».</div>
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>
	<style>
		
		.div_normal{
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 20px;
		padding: 0px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Создаем блочный флекс-контейнер */
		.div_flex{
		display: flex;
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 5em;
		padding: 0px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}		
		
		p, span{
		width: 100px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

	</style>
</head>
<body>

	<!-- По умолчанию display: block -->
	<div class="div_normal">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

	<!-- А здесь мы имеем дело с флекс-контейнером -->
	<div class="div_flex">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>	
	
</body>
</html>

Пример №2