Особенности строчно-блочных элементов в CSS

В данном уроке мы с вами рассмотрим теги, которые при отображении на экране являются строчно-блочными. Строчно-блочные элементы сочетают особенности блочных и строчных элементов.

Вы пока знаете только один такой тег: img. Картинки, однако, не раскрывают все особенности этой модели, поэтому работу таких элементов посмотрим на примере тегов span, сменив им блочную модель, задав свойству display значение inline-block.

Ширина и высота строчно-блочного элемента

Строчно-блочного элементу можно задать ширину и высоту, подобно блочным элементам:

text

span {
	width: 100px;
	height: 100px;
	border: 1px solid red;
	display: inline-block;
}

Ширина строчно-блочного элемента

Если у строчно-блочного элемента не задана ширина, то он его ширина сформируется содержимым, подобно строчным элементам:

text

span {
	height: 100px;
	border: 1px solid red;
	display: inline-block;
}

Высота строчно-блочного элемента

Если у строчно-блочного элемента не задана высота, то его высота сформируется содержимым, подобно строчным элементам:

text

span {
	width: 100px;
	border: 1px solid red;
	display: inline-block;
}

Несколько строчно-блочных элементов рядом

Если расположить несколько строчно-блочных элементов рядом, то они выстроятся в ряд, подобно строчным элементам:

<span>text</span>
<span>text</span>
<span>text</span>

span {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	border: 1px solid red;
	display: inline-block;
}

Практические задачи

Даны дивы:

<div class="elem">text</div>
<div class="elem">text</div>
<div class="elem">text</div>

div {
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Выстройте эти дивы в ряд, преобразовав их в строчно-блочные элементы.