Особливості рядково-блочних елементів у 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;
}

Вибудуйте ці діви в ряд, перетворивши їх у рядково-блокові елементи.