Элементы display:block, inline и inline-block

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

Два наиболее принципиальных способа отображения, это display:block и display:inline.

Если в <body> создать пустой блок <div>, то он будет по высоте занимать 0 пикселей, а по ширине растянется на всю ширину блока-родителя. Это нормальное поведение пустого блочного элемента по умолчанию.

<div></div>

Добавив в блок текст, мы заставим занять его по высоте столько места, сколько указано в его line-height. Если у него не задано CSS-свойство line-height, то браузер проверит его родителя и так, по цепочке, дойдёт до тега <body> или <html>.

<div>Какой-то текст.</div>

Таким образом наследуются все свойства. Тег <html> содержит все CSS-свойтсва со значениями по умолчанию.

Тег <div> является ярчайшем представителем блочных тегов, т.к. именно его используют для позиционирования блоков веб-документа. Кроме него по умолчанию блочными являются теги <article>, <section>, всё семейство тегов-заголовков <h1>...<h7>, а так же <p>, <header>, <footer> и другие.

Ширину и высоту блока удобно регулировать CSS-свойствами width и height. Чтобы после задания ширины и высоты визуально наблюдать блок, в него лучше вложить какие-то теги с текстом. И не помешает задать цвет в шестнадцатиричной системе (это, например так: #ff0000 — максимально красный). Попробуем сделать это.

<div class="redblock">
	<p>Какой-то текст, чтобы набить блок.</p>
	<p>Какой-то текст, чтобы набить блок.</p>
	<p>Какой-то текст, чтобы набить блок.</p>
</div>

А теперь применим к нему CSS.

.redblock {
	background: #ff0000;
	width:400px;
	height:400px;
}

.redblock p { /* Эта инструкция применится ко всем тегам p, вложенным в тег с классом redblock */
	color:#fff;
}

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

Неплохо, но блок прилип к левой границе браузера. А текст внутри блока находится вплотную к границам. Перепишем кое-что в CSS.

.redblock {
	background: #ff0000;
	width:400px;
	height:400px;
	box-sizing:border-box; /* Если не изменить box-sizing, то по умолчанию значение padding расширит сверху, снизу, слева и справа красный блок на свой размер. Т.е. добавит всем сторонам по 20px. Значение border-box сообщает браузеру, что границы и паддинги включаются в значения width и height */
	padding:20px;
	margin:20px; /* Это внешний отступ от блока, чтобы мы не прописали в box-sizing, его значения будут отдельными */
}

.redblock p {
	color:#fff;
}

Красный блок с изменениями.

Мы изучили основные свойства блочной модели. Теперь посмотрим, как ведут себя inline элементы. Для этого добавим в готовую строницу такой код:

<span class="inline-sample">Ширину и высоту блока удобно регулировать CSS-свойствами width и height. Чтобы после задания ширины и высоты визуально наблюдать блок, в него лучше вложить какие-то теги с текстом. И не помешает задать цвет в шестнадцатиричной системе (это, например так: #ff0000 — максимально красный). Попробуем сделать это.</span>

<span> — это строчный элемент, так же, как и теги <i>, <b>, <em>, <strong>, <img> (тег для вставки изображения) и др. Что ж, добавим форматирование к новому элементу по классу:

.inline-sample {
	font-size:22px;
	line-height:28px;
}

Чтобы визуализировать inline-тег, добавим CSS-инструкцию background:lightgreen; к классу .inline-sample. Теперь мы видим, как ведёт себя строчный элемент:

Уже сейчас явно видно отличие между блочным и строчным элементом на примере красного блока и текста на светло-зелёном фоне. Попробуем добавить внутренний отступ к строчному элементу.

.inline-sample {
	font-size:22px;
	line-height:28px;
	background:lightgreen;
	padding:10px;
}

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

Отсюда можно сделать вывод, строчные элементы нужны для оформления текста, регулирования высоты строки, размера шрифта, толщины штриха, цвета и т.п. Блочные элементы нужны для позиционирования блоков в документе. Причём на практике интерлиньяж, цвет и размер шрифта задают блочным тегам <p>. А строчные элементы заведуют оформлением коротких фрагментов текста внутри параграфов. Например, ссылки <a>, смысловое выделение <em> или собственные логически обособленные фрагменты, такие как цена в корзине: <span class="cost">.