Что такое inline-block?

Если вы работаете с CSS не первый день, то наверняка знакомы со значением inline-block, свойства display. Наиболее часто эту связку используют для устранения проблем в IE6.

Попробую вкратце объяснить о чем идет речь. Если вы назначаете float элементу и одновременно задаете margin с той же стороны, то в IE6 margin (странным образом) удвоится. Проблему можно исправить, применив хак специально для IE6, в котором можно указать значение margin в половину меньше от оригинала, или же вы можете назначить элементу свойство display в значение inline-block. Это разрешит проблему в большинстве, если не во всех случаях.

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

Определение

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

CSS-справочник Sitepoint

Значение inline-block генерирует блочный элемент, с поведением строчного элемента

QuirksMode

Строчный блок располагается в той же самой строке, что и соседний контент, но при этом ведет себя как блок

Роберт Нэйман:

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

Я думаю определение Роберта Нэймана самое лучшее, поскольку сразу объясняет практический смысл значения.

Демонстрация

Нижеприведенное изображение демонстрирует значение inline-block в действии:

Как его можно использовать?

Есть несколько ситуаций, с которыми вам поможет справиться inline-block:

• для исправления двойных полей у плавающих элементов в IE6 (как уже говорилось выше)
• для позиционирования блочных элементов в одной строке без использования float
• для указания ширины и высоты строчному элементу, без изменения его поведения
• для указания строчному элементу полей и отступов.

То, что следует запомнить

При использовании значения inline-block, следует помнить о некоторых факторах и недостатках. Элемент, с назначенным inline-block, является чувствительным к пробелам. То есть, если вы применяете это значение к маркированному списку (например для создания навигации), то каждый элемент списка будет иметь дополнительное пустое пространство на стыке двух элементов. Для того, чтобы этого избежать, необходимо удалить любые пробелы, разделяющие элементы <li>, в HTML-разметке. Следовательно, ваш HTML-код будет выглядеть следующим образом:

<ul>  
    <li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>  
</ul>  

Или еще хуже:

<ul>  
    <li>Item One</li  
    ><li>Item Two</li  
    ><li>Item Three</li  
    ><li>Item Four</li  
    ><li>Item Five</li>  
</ul>  

Есть и другое решение этой проблемы – можно назначить font-size: 0, для элемента <ul>, а затем увеличить размер шрифта для элементов списка <li>. Но это не очень хорошее решение, в данном случае, лучше отказаться от использования inline-block.

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

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

Поддержка браузерами

Думаю вы не удивитесь, узнав, что inline-block работает во всех браузерах, кроме IE6 и IE7. Но имитировать работу этого значения не так уж сложно. Для того, чтобы применить к элементу значение inline-block в IE6 и IE7, нужно всего лишь установить свойство display в значение inline, а затем назначить элементу layout. Главное, убедитесь, что значение inline, появляется после значения inline-block в CSS-файле, и не забудьте спрятать inline от других браузеров.

Перевод статьи “What is Inline-Block?”, автор Louis Lazaris