—»     —»   Что такое inline-block?
  Раздел: CSS/Style Sheets   Нет комментариев  

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

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

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

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

Как он определяется?

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

: Следуя информации с Sitepoint :

«inline-block делает так, что элемент генерирует блок, который расположен так, как будто является встроенным».

: Согласно сайту QuirksMode :

«Встроенный блок расположен как встроенный (например, на той же строчке, что и соседнее наполнение), но является отдельным блоком».

: Согласно Роберту Найману :

«Изначально, это отличный способ встраивать элементы, но при этом сохранять их свойства блоков (например, ширина и высота, верхний и нижний отступы и так далее)».

Нам кажется, что определение Наймана наиболее описывает систему.

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

Посмотрите на изображение, которое демонстрирует нам inline-block. Здесь вы можете увидеть, как система ведет себя:

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

Как это можно применять?

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

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

То, что следует учитывать

Если вы собираетесь использовать метод inline-block, то вам следует обратить внимание на некоторые вещи. inline-block-элемент материально обусловлен белым пространством, так что если вы захотите отобразить список посредством inline-block (в навигационном меню, к примеру), то между пунктами списка, возможно, будут нежелательные промежутки. Для того чтобы убрать эти промежутки, вам придется вырезать с вашего кода 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", или нечто похожим, и дальнейшим увеличением шрифта каждому пункту списка. Но это требует много места и кода, так что мы рекомендуем вам в этом случае не пользоваться inline-block.

Также, если вы объявляете число элементов, использующих inline-block, а эти элементы отличаются по параметру высоты, то вам придется добавить что-нибудь типа параметра vertical-align: top, чтобы быть уверенными в том, что выравнивание не будет различаться. Посмотрите на эту интересную страницу, которая демонстрирует нам данные особенности при различных обстоятельствах.

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

Касательно кросс-браузерности

Вас не должно было удивить то, что inline-block работает одинаково во всех браузерах, за исключением IE6 и 7. Но и в этих версиях эту проблему не так и сложно решить. Для того, чтобы элемент принял значение inline-block в IE6-7, вам просто нужно сбросить параметр отображения и выставить значение inline, а затем сверстать элемент. Просто убедитесь в том, что значение inline следует за inline-block в вашем CSS, и не забудьте спрятать значение inline от других браузеров. Возможно, вам также придется подправить вертикальное выравнивание в этих версиях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 8504   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031