Просмотров: 1 042

Строчно-блочные элементы.

Особой группой от строчных и блочных элементов, стоят так называемые строчно-блочные элементы.

Это элементы, которые совмещают в себе свойства блочных и строчных элементов.

В HTML нет специальных тэгов, которые бы относились к строчно-блочным элементам. Для того, чтобы сделать элемент строчно-блочным необходимо применить к нему свойство display:inline-block.

Давайте посмотрим, какие основные свойства и характеристики есть у этих элементов и зачем они нужны.

1) Также как строчные элементы, строчно-блочные элементы располагаются друг за другом в пределах одной строки.

В то же время, как к блочным элементам, строчно-блочным элементам можно успешно применять свойства margin-top, margin-bottom, padding-top, padding-bottom и свойство height.

<p>Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста <span style="display:inline-block; background:#808; border:1px solid #999; width:150px; height:50px; margin:20px; padding:20px; ">Строчно-блочный элемент</span> Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста Пример текста </p>

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

2) Внутри строчно-блочных элементов могут находиться как строчные, так блочные, так и табличные элементы.

3) Ширина и высота строчно-блочных элементов формируется также как для блочных элементов.

4) Для строчно-блочных элементов работает свойство vertical-align.

<span style="display:inline-block; background:#808; border:1px solid #999; width:50px; height:50px; margin:20px; padding:20px; ">Строчно-блочный элемент</span> <span style="display:inline-block; background:#808; border:1px solid #999; width:50px; height:20px; margin:20px; padding:20px; vertical-align:bottom ">bottom</span><span style="display:inline-block; vertical-align:top; background:#808; border:1px solid #999; width:50px; height:10px; margin:20px; padding:20px; ">top</span>

5) Схлопование margin для строчно-блочных элементов не работает.

Где строчно-блочные элементы могут пригодиться?

Их основная задача: размещение и выравнивание блоков в пределах одной строки.

Очень часто это можно видеть в интернет-магазинах:

05-01-2014 15-20-14

Как правило, для этой цели сейчас используют свойство float. С помощью inline-block эту задачу можно решать намного проще и более гибко регулировать их положение и выравнивание по вертикали.

Единственный недостаток display:inline-block в том, что большинство старых браузеров не поддерживает свойства display:inline-block.

Браузер Internet Explorer начал поддержку этого свойства только со своей 8 версии.

Посмотрите поддержку браузеров в следующей таблице.

05-01-2014 13-52-57