В статье рассмотрены особенности работы свойства display со значением inline-block. Также приводится несколько практических примеров с применением данного свойства и решением ряда типичных проблем верстки.

Что это такое и как оно работает?

Свойство display определяет, как должен вести себя элемент на странице по отношению к остальным, а именно как он расположится. Существует, в принципе, 2 основных типа представления элемента на странице: блочный и строчный. Блочный элемент занимает все свободное место строки и перекидывает следующий элемент на новую. Строчные элементы располагаются в одну строку.

По отдельности эти формы представления блоков выполняют свои определенные задачи, однако в симбиозе могут охватывать достаточно широкий спектр задач. Именно поэтому был создан альтернативный вариант, который одновременно элементу присваивает функции блочного и строчного элементов - display со значением inline-block.

Блок внутри строчного элемента

Чтобы было понятнее типологию этого типа задач, представим, что нам надо вставить кнопку внутрь текста. То есть у нас будет массив какого-то текста, а где-то в определенном месте будет стоять кнопка с определенным задним фоном. Примерно это может выглядеть так

Как же это реализовать кодом? В этом нет ничего сложного, код довольно прост и в нем легко сориентироваться

HTML

<div class="block0">
Lorem ipsum dolor sit amet, consectetuer <span class="button">adipiscing elit</span>.
 Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
 et magnis dis sociis <span      class="button">montes</span>, nascetur ridiculus
mus. Donec quam felis, ultricies nec, <span class="button">pellentesque</span>
 eu, pretium quis, sem.
</div>

CSS

.block0 /*обвертка текстового блока*/ {
	display:block;
	width:300px;
	margin:30px auto 0px auto;
	position:relative;
	text-align:center;
	}
.button /*код кнопки*/  {
	display:inline-block;
	background:#679bce;
	text-align:center;
	color:#fff;
	padding:3px 7px;
	border-radius:3px;
	height:23px;
	cursor: pointer;
}

Устанавливаем элемент по центру, не зная ширины

Может возникнуть задача, когда необходимо блок или кнопку установить по центру контейнера. В этом случае нам снова может прийти на помощь комбинация блочных и строчных свойств.

К примеру, у нас имеется картинка, а снизу от нее будет расположена кнопка, при нажатии на какую можно будет оставлять комментарий. Эта кнопка должна располагаться по центру блока. Для этого нашей кнопке прописываем display: inline-block;. А родительскому тегу необходимо задать выравнивание текста по центру. Код этого решение будет выглядеть следующим образом:

HTML

<div class="block0">
	<img width="250" src="img.jpg" title="Пример" alt="Картинка">
	<div class="button">Комментировать</div>
</div>

CSS

.block0 {
	display:block;
	width:250px;
	margin:30px auto 0px auto;
	position:relative;
	padding:15px;
	background:#eee;
	text-align:center;/*центрирует нашу кнопку*/
	}
.button {
	display:inline-block;
	// display: inline; /* для IE6-7,
 которым неведом inline-block */
	background:#679bce;
	text-align:center;
	color:#fff;
	padding:3px 7px;
	border-radius:3px;
	height:23px;
	cursor: pointer;
	margin-top:9px;
}

В браузере это будет выглядеть так:

Выравниваем элементы списка с разной высотой

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

Для решения этой проблемы отлично подойдет свойство float, однако есть одно маленькое «но». Такое решение справедливо, если установлена фиксированная высота. Для универсальности будем рассматривать резиновые блоки, которые будут выравниваться при любой высоте и любом количестве текста.

Вторым решением, которое обойдет проблему высоты могут стать строки таблицы. Применение таблицы будет не рационально и отразит негативный эффект с точки зрения семантики. Можно конечно имитировать строки или ячейки таблицы через CSS, однако этому будет сопутствовать множество проблем.

Наиболее просто и действенный способ — опять обратиться к возможностям inline-block. Запишем следующий код:

HTML

<ul>
	<li><img width="150" src="img2.png" title="Пример1" alt="Картинка1">
		Картинка 1</li>
	<li><img width="150" src="img2.png" title="Пример2" alt="Картинка2">
		Картинка 2</li>
		…
</ul>

CSS

.ul {
	display:block;
	width:330px;
	margin:30px auto 0px auto;
	position:relative;
	padding:5px;
	background:#eee;
	text-align:center;/*центрирует нашу кнопку*/
	}
li {
	display:inline-block;
	// display: inline; /* для IE6-7, которым неведом inline-block */
	vertical-align:top;
	text-align:center;
	margin:5px 5px;
	width:150px;
}
img {
	display:block;
	width:150px;
}

А вот так будет выглядеть наш практический пример в браузере

Кроме того, при использовании inline-block в комплексе с line-height можно заставить работать свойство vertical-align, которое предназначено для работы в текстовом блоке или в ячейках таблицы.

В каких браузерах работает?