inline-block

Что такое 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

Что такое inline-block?: 15 комментариев

  1. Хм, для исправления бага IE6 можно указать и просто inline. Видимые изменения те же, хотя, в случае с плавающими div, inline-block, возможно, более правильное решение.

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

  2. да,без примеров статья туговато воспринимается.пока все не проделал сам, до конца не усек.материал полезный,но надеюсь уже скоро,скоро IE 6 все таки канет в летах=)

  3. Ещё лучше не пытаться присвоить inline-block-ам position: relative и спозиционировать что-то внутри. Получается кошмар! Особенно страдают IE и Chrome, если по памяти. Спасает вложенный блок.

  4. «Думаю вы не удивитесь, узнав, что inline-block работает во всех браузерах, кроме IE6 и IE7.»

    6-й и 7-й ишаки нормально рендерят элементы со свойством display:inline-block, если они по умолчанию инлайновые (em, span, strong и т.д.) . проблемы возникают только с блочными элементами

  5. inline-block лучше всего реализован в Нитрогене. нет необходимости писать id в разметку и реализация в 3 клика.

  6. какая-то неоднозначная статья, вопрос в другом, но про inline-block. Если сделать допустим 3 дива, одинаковых по ширине но разных по высоте, 1- самый высокий, 2 — пониже и т.п., суть — блоки выравниваются в строку, но не по верху, а низу первого блока. Не замечали такого бага периодического?

    1. Ололоша, это не баг, а стандартное поведение инлайн-блоков по умолчанию: они выстраиваются своими базовыми линиями по базовой линии строки родительского элемента. А их базовые линии — это, грубо говоря, нижний край последней строчки их текста. Но это легко переопределяется через vertical-align: можно задать хоть top, хоть middle, и выровнять инлайн-блоки верхними краями и серединами соответсвенно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *