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

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

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

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

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

`<span>text</span>` `span { width: 100px; height: 100px; border: 1px solid red; display: inline-block; }`

:

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

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

`<span>text</span>` `span { height: 100px; border: 1px solid red; display: inline-block; }`

:

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

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

`<span>text</span>` `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; }`

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

←→
↑