Свойство display
http://belarusweb.net
Основы создания сайтов

Свойство 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 показано в примере 5.1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство display</title>
	<style>
		.class_1{
		color: green;
		border: solid 2px blue;
		width: 250px;
		}
	</style>
</head>
<body>
	<span class="class_1">
		По умолчанию элемент 'span' является строчным элементом.
	</span>
	<p class="class_1">
		По умолчанию абзац является блочным элементом.
	</p><br>
	
	<p class="class_1" style="display: inline">
		Теперь абзац стал строчным элементом и его ширина 
		определяется содержимым.
	</p><br><br>
	<span class="class_1" style="display: block">
		Теперь элемент 'span' стал блочным элементом.
	</span><br>
	
	<p style="display: inline">Первый строчный 'p'.</p>
	<p class="class_1" style="display: inline-block">inline-block 'p'</p>
	<p style="display: inline">Второй строчный 'p'.</p>
</body>
</html>

Пример 5.1. Использование значений свойства display

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