Если вы работаете с CSS не первый день, то наверняка знакомы со значением inline-block, свойства display. Наиболее часто эту связку используют для устранения проблем в IE6.
Попробую вкратце объяснить о чем идет речь. Если вы назначаете float элементу и одновременно задаете margin с той же стороны, то в IE6 margin (странным образом) удвоится. Проблему можно исправить, применив хак специально для IE6, в котором можно указать значение margin в половину меньше от оригинала, или же вы можете назначить элементу свойство display в значение inline-block. Это разрешит проблему в большинстве, если не во всех случаях.
Однако, решение проблемы с двойными полями в IE6, далеко не единственное применение значения inline-block, оно может принести гораздо больше пользы, если хорошо его изучить.
Определение
Далее представлены несколько описаний для значения inline-block, взятые из разных источников:
Значение inline-block генерирует блочный элемент, с поведением строчного элемента
Строчный блок располагается в той же самой строке, что и соседний контент, но при этом ведет себя как блок
В основном, это способ сделать элементы строчными, при этом сохранив его блочные возможности, такие как указание ширины и высоты, верхних и нижних отступов, паддингов и др.
Я думаю определение Роберта Нэймана самое лучшее, поскольку сразу объясняет практический смысл значения.
Демонстрация
Нижеприведенное изображение демонстрирует значение inline-block в действии:
Как его можно использовать?
Есть несколько ситуаций, с которыми вам поможет справиться inline-block:
- для исправления двойных полей у плавающих элементов в IE6 (как уже говорилось выше)
- для позиционирования блочных элементов в одной строке без использования float
- для указания ширины и высоты строчному элементу, без изменения его поведения
- для указания строчному элементу полей и отступов.
То, что следует запомнить
При использовании значения inline-block, следует помнить о некоторых факторах и недостатках. Элемент, с назначенным inline-block, является чувствительным к пробелам. То есть, если вы применяете это значение к маркированному списку (например для создания навигации), то каждый элемент списка будет иметь дополнительное пустое пространство на стыке двух элементов. Для того, чтобы этого избежать, необходимо удалить любые пробелы, разделяющие элементы <li>, в HTML-разметке. Следовательно, ваш HTML-код будет выглядеть следующим образом:
[html]
<ul>
<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>
[/html]
Или еще хуже:
[html]
<ul>
<li>Item One</li
><li>Item Two</li
><li>Item Three</li
><li>Item Four</li
><li>Item Five</li>
</ul>
[/html]
Есть и другое решение этой проблемы – можно назначить 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
Leave a Reply