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

Еще в курсе изучения языка гипертекстовой разметки HTML мы упоминали о строчных и блочных элементах, а также о свойстве display, которое отвечает за то, как элемент будет отображаться браузером. В частности, узнали, что строчным элементам соответсвует значение inline, а блочным – block. Теперь же, настало время перечислить все значения, принимаемые ненаследуемым свойством display:

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

Использование некоторых значений свойства display показано в примере №1.

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство display</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. Использование значений свойства display

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

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

Быстрый переход к другим страницам