inline-block: простое свойство для непростых задач

inline-block совмещает в себе возможности блочных элементов (block) и некоторые особенности поведения строчных (inline). Преимущество такого симбиоза мы уже успели оценить в выравнивании навигации, состоящей из блочных элементов. Тут рассмотрим еще несколько примеров, где inline-block приходится очень кстати.

Блок внутри текста

Нужно реализовать что-то подобное:

Т.е. нужно элементу, находящемуся в тексте, задать размеры и фон (которые можно задавать только блочным элементам). Для подобных задач и был создан inline-block.

вступление, состоящие из нескольких слов о чем-то<br/>
какой-то текст <span class="button">текст в кнопке</span> далее снова какой-то текст<br/>
а тут текст на другой строке

.button {
	display: inline-block;
	background: url(path-tp/button-back.png);
	width: 139px;
	height: 22px;
	cursor: pointer;
	vertical-align: middle;
	padding-top: 5px;
}

Центрируем блок с заранее неизвестной шириной

Детально проблемы этой задачи были рассмотрены в статье «Центрирование резинового блока по горизонтали»

.parent {
	text-align: center;
}
.mainMenu {
	display: inline-block; /*блок строчный, а значит будет центрироваться*/
	// display: inline; /* для IE6-7, которым неведом inline-block */
}

Ровные строки списка, при разных высотах элементов списка (li)

Подобная разметка легко делается с помощью float, когда размеры (хотя бы высота) жестко прописана. Если же высоты нет, для такой разметки удобно применять таблицу: ячейки сами подстраиваются под содержимое, строки таблицы остаются ровными. Но таблица в данном случае не уместна с точки зрения семантики, а проэмулировать ее поведение с помощью CSS (display: table/table-cell/table-row) достаточно проблематично.

Но такую эмуляцию позволяет сделать inline-block:

<ul class="catalog">
		<li>
			<img src="path-to/pic1.jpg" alt="" width="105" height="105" />
			картинка номер 1
		</li>
		<li>
			<img src="path-to/img2.jpg" alt="" width="105" height="105" />
			картинка номер 2
		</li>
...
</ul>

Этот код легок, прост для реализации программной логики и семантичен.

.catalog {
	width: 400px;
}
.catalog li {
	display: inline-block;
	width: 150px;
	margin: 0 10px 15px 0;
	vertical-align: top;
	text-align: left;
	// display: inline; /* для IE6-7 */
}
.catalog img {
	display: block;
	margin-bottom: 5px;
}

Более того, используя inline-block в связке с некоторыми inline-правилами(например line-height), можно успешно использовать такие радости, как, например, vertical-align, которые присущи только текстовым и табличным элементам.

Демо пример. Проверено в:

• IE 6-8
• Firefox 3.6
• Opera 10.5
• Chrome 4
• Safari 4

Заметка

Как обычно, в боевых условиях вместо хаков используем условные комментарии или условные CSS.

Подобным образом же можно реализовать и галерею, где заранее не оговорены размеры изображений.

Было так же желание сделать вертикальное выравнивание с помощью inline-block, чтобы хотя бы избавится от expression для IE. Но для IE фокус не удался, для других браузеров вполне рабочий и более удобный вариант:

	<li>
		<img src="path-to/pic1.jpg" alt="" width="105" height="105" />
	</li>

 li {
    height: 84px; // высота блока
    line-height: 84px; // нужен, чтобы заработало vertical-align
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

Может еще получится решить эту задачу для IE.