мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Особенности строчно-блочных элементов в 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> span { width: 100px; height: 100px; border: 1px solid red; }

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