Очередной блог фрилансера » display http://dreamhelg.ru о моей работе в сети и не только Fri, 23 Dec 2011 07:10:04 +0000 en hourly 1 http://wordpress.org/?v=3.3 Что такое inline-block? http://dreamhelg.ru/2010/04/what-is-inline-block/ http://dreamhelg.ru/2010/04/what-is-inline-block/#comments Tue, 27 Apr 2010 06:48:27 +0000 dreamhelg http://dreamhelg.ru/?p=1997 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-код будет выглядеть следующим образом: [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]]> http://dreamhelg.ru/2010/04/what-is-inline-block/feed/ 8