Что такое inline-block?
Если вы работаете с 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:
То, что следует запомнить
Кроме того, если у вас на странице предполагается наличие нескольких элементов, с разной высотой и значением 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
15 комментариев
Хм, для исправления бага IE6 можно указать и просто inline. Видимые изменения те же, хотя, в случае с плавающими div, inline-block, возможно, более правильное решение.
Статье так не хватает побольше практических примеров, поэтому слегка дополню ссылкой, как можно кроссбраузерно сверстать каталог товаров при помощи inline-block.
да,без примеров статья туговато воспринимается.пока все не проделал сам, до конца не усек.материал полезный,но надеюсь уже скоро,скоро IE 6 все таки канет в летах=)
Ещё лучше не пытаться присвоить inline-block-ам position: relative и спозиционировать что-то внутри. Получается кошмар! Особенно страдают IE и Chrome, если по памяти. Спасает вложенный блок.
«Думаю вы не удивитесь, узнав, что inline-block работает во всех браузерах, кроме IE6 и IE7.»
inline-block лучше всего реализован в Нитрогене. нет необходимости писать id в разметку и реализация в 3 клика.
Спасибо за интересный материал. CSS не стоит на месте.
какая-то неоднозначная статья, вопрос в другом, но про inline-block. Если сделать допустим 3 дива, одинаковых по ширине но разных по высоте, 1- самый высокий, 2 — пониже и т.п., суть — блоки выравниваются в строку, но не по верху, а низу первого блока. Не замечали такого бага периодического?
Ололоша, это не баг, а стандартное поведение инлайн-блоков по умолчанию: они выстраиваются своими базовыми линиями по базовой линии строки родительского элемента. А их базовые линии — это, грубо говоря, нижний край последней строчки их текста. Но это легко переопределяется через vertical-align : можно задать хоть top, хоть middle, и выровнять инлайн-блоки верхними краями и серединами соответсвенно.
Элементы HTML по способу отображения на веб-странице делятся на строчные и блочные элементы.
Дефолтные стили браузера и их нормализация
Т.е., если в браузере открыть HTML документ без привязанного к нему CSS кода, то он уже будет каким-то образом оформлен. Это базовое оформление задаётся с использованием стилей браузера.
Но в разных браузерах дефолтные стили могут быть различными.
Например, одном в браузере некоторый элемент может иметь одно оформление, а в другом другое.
Это не хорошая ситуация, т.к. в большинстве случаев желательно чтобы сайт или веб-приложение отображалось в разных браузерах одинаково, или очень близко к этому.
Для того чтобы нормализовать стили, которые отличаются в разных браузерах можно использовать Normalize.css.
После подключения этого файла все элементы в HTML документе будут отображаться более согласовано и в соответствии со современными стандартами.
Строчные и блочные элементы
Элементы HTML обычно являются строчными или блочными. Но это разделение существовало в HTML4. В HTML5 был предложен новый подход. В этом новом подходе применение того или иного HTML элемента должно определяться на основе контента, который он должен содержать. Для этого в HTML5 были введены категории контента, и описано какой элемент и к каким категориям может относится.
Строчные элементы (inline)
Строчные элементы – это элементы, которые являются частью строки и занимают такое количество пространства, которое необходимо для отображения их содержимого.
Строчным элементам нельзя установить размеры ( width и height ), задать верхние и нижние margin отступы.
Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.
Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.
Строчные элементы обычно используются для выполнения некоторых действий над текстом, например: перенос строки, выделения фрагмента текста курсивом, логического выделения некоторого текста и применения к нему стилей с помощью CSS и т.д. В зависимости от назначения строчного элемента фрагмент текста помещают между открывающим и закрывающим тегом или применяют тег в любом месте текста, например для переноса строки.
Например:
Можно использовать строчный элемент чтобы выделить текст, привлекающий внимание посетителей сайта с помощью жирного начертания.
Блочные элементы (block)
Блочные элементы могут содержать строчные элементы и другие блочные элементы, для которых их родитель будет являться контейнером. Блочные элементы предназначены для разработки каркаса веб-страницы, разметки больших блоков текста и много другого.
Внутри этого блочного элемента помещён строчный элемент.
display
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 2.0+ | 7.0+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
Краткая информация
| Значение по умолчанию | inline |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visuren.html#display-prop |
Версии CSS
Описание
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Синтаксис
display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
[window.]document.getElementById(» elementID «).style.display
Браузеры
Internet Explorer до версии 7 включительно:
Opera 9.2, а также Firefox 2.0:
Chrome 2.0, а также Safari версии 3 и старше, iOS:
Почему инлайнить стили — плохо
Встроить стили глобально:
Встроить с помощью атрибута style :
Импортировать стили из внешних файлов:
Подключить внешние таблицы стилей:
Почему разработчики предпочитают внешние стили
Чаще всего в веб-разработке можно встретить проекты с внешними таблицами стилей. Дело в том, что такой способ стилизации удобен не только для создания сайтов или веб-приложений с нуля, но и для их дальнейшей поддержки. С его помощью легко управлять CSS-правилами, следить за наследованием и каскадностью, поддерживать чистоту кода в целом.
Инлайн-стили не так гибки, как внешний CSS. Их сложнее поддерживать и почти невозможно переопределить. Из-за внутренних стилей HTML-файл раздувается и становится тяжелее. Функциональность CSS не так обширна, как при работе с внешними стилями. Чтобы понять всю глубину проблемы, сравним оба способа стилизации.
Поддержка кода. При подключении внешнего стилевого файла CSS отделён от разметки, поэтому его проще поддерживать. Подключение стилей извне также позволяет использовать препроцессоры, чтобы ускорить процесс разработки и сделать код легко читаемым. А если вы работаете над проектом вместе с другими людьми, такой способ позволяет всем участникам быстрее ориентироваться в стилях.
Пример стилей в стороннем CSS-файле
При использовании внешнего CSS вы видите структуру своего проекта. Вы понимаете, где и какие свойства заданы элементу и можете легко их изменить. Вы понимаете логику: какие свойства переопределены и почему. Разбираетесь в наследовании и каскадировании и можете управлять ими.
Дополнительная функциональность. Внешние стили позволяют гибко использовать псевдоклассы и псевдоэлементы. Например, разработчик может задать интерактивные состояния отдельно выбранным кнопкам, стилизовать каждый чётный элемент списка или выполнить другие задачи.
Внешний CSS также открывает доступ к кастомным свойствам. Этот способ стилизации позволяет создавать переменные и с их помощью гибко управлять стилями. Например, быстро менять цвета.
Пример стилей в стороннем CSS-файле
Переменные содержат все цвета, используемые на сайте. Если заказчик захочет использовать зелёный другого оттенка, разработчику не нужно будет искать и менять каждое стилевое правило с этим цветом. Он просто изменит цвет в одной переменной.
С внешними таблицами стилей проще придерживаться принципа DRY. Ведь в этом случае все стили, которыми нужно управлять, находятся в одном месте, а не на нескольких страницах проекта.
Переопределение стилей. Стили из внешнего CSS файла легко переопределять, так как у каждого селектора своё значение специфичности. Класс приоритетнее селектора тега, а идентификатор приоритетнее класса.
Скорость загрузки и трафик. Во время первой загрузки страницы внешние стили отображаются с задержкой: браузеру нужно время, чтобы скачать стилевой файл. Особенно заметно такое поведение при медленном интернет-соединении. Понадобится несколько сотен миллисекунд или даже целые секунды, чтобы на странице появились стили. К тому же внешний стилевой файл относится к блокирующим ресурсам. Пока он не загрузится, рендеринг в браузере не завершится.
Впрочем, браузер кеширует файлы CSS, поэтому при повторной загрузке ему не понадобится второй раз скачивать стили. Это сэкономит трафик и увеличит скорость отрисовки страницы.
Внутренняя стилизация содержится непосредственно в HTML-коде, поэтому с каждым новым правилом вес файла будет увеличиваться. Вместе с ним растёт количество потребляемого трафика и уменьшается скорость загрузки страницы. На небольших сайтах эта проблема может быть не так критична. Но на крупных интернет-магазинах или порталах, а также при медленном интернет-соединении разница будет очевидна и грозит потерей посетителей.
Когда можно использовать inline-стили?
Внутренние стили имеют серьезные недостатки, поэтому фронтенд-разработчики редко используют их в работе. Но у этого способа стилизации есть и положительные стороны.
Ускорение отрисовки страниц. Мы уже упоминали принцип работы браузера: при подключении внешнего CSS ему приходится отправлять дополнительный запрос на сервер, чтобы скачать стилевой файл. Но в случае с inline-стилями этого делать не нужно. Они уже доступны, так как содержатся непосредственно в файле HTML, поэтому при первой загрузке стили отрисуются быстрее.
Это преимущество работает на небольших страницах, не перегруженных стилями, но его можно использовать и на крупных ресурсах для повышения производительности CSS. С помощью inline-стилей вы можете ускорить отображение той части сайта, которую пользователи должны увидеть первой. Например, меню и первый блок с информацией. Всё, что для этого нужно — прописать стили этих блоков и элементов внутри HTML.
Почтовые рассылки. Ещё один случай, когда вы можете использовать внутренние стили — создание email-рассылок. По соображениям безопасности почтовые сервисы блокируют загрузку внешних ресурсов, в том числе стилевых файлов в HTML-коде письма. Например, по таким принципам работают Яндекс.Почта, Yahoo, Gmail и другие почтовые клиенты. Поэтому у разработчиков нет иного выхода, кроме как использовать inline CSS.
Пример вёрстки письма с добавлением внутренних стилей
Тестирование и работа со сторонними программами. Inline-стили также бывают удобны, если стилизация задана с помощью сторонних программ или через CMS. Некоторые разработчики используют внутренние стили для поиска и решения каких-то ошибок. За счет каскадности правила внутри атрибута style переопределяют другие стили, поэтому можно временно прописать правила CSS в разметке и посмотреть на отображение элементов. Но этот способ лучше использовать с осторожностью и по возможности сразу вносить правки во внешний стилевой файл.
Ещё статьи о вёрстке
Применение инлайн-стилей не самая распространённая практика, чаще всего вам предстоит использовать внешний CSS. Но помните, что внутренние стили тоже бывают полезны.
Если вы хотите освоить разные способы подключения стилей и поближе познакомиться с CSS, попробуйте наши бесплатные тренажёры. Они помогут вам разобраться со всеми вариантами стилизации, как внутренними, так и внешними.
Когда использовать inline-block?
Дата публикации: 2020-08-14
От автора: значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов?
Кнопки
Самый распространенный ответ, который я услышал, был: я всегда использую его для кнопок.
Сложность в том, что:
Граница в направлении блока для встроенных элементов полностью игнорируется
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Отступ встроенных элементов не влияет на высоту строки текста.
Таким образом, хотя сами кнопки в значительной степени хорошо оформлены, родительский элемент и окружающий текст, вероятно, нет. Вот демо:
Отступ встроенных кнопок вырывает их из контейнера, что немного странно.
Ситуация ухудшается, когда появляется обтекание с помощью встроенных кнопок:
Так что да, inline-block для кнопок имеет смысл. Но…
Не забывайте о inline-flex и inline-grid
Со значениями display inline-flex и inline-grid вы получите все то же хорошее поведение, что и у inline-block, но элементы (часто кнопки) могут выиграть от более мощной встроенной системы макетов. Возьмем пример кнопок с иконками, например:
Чтобы текст и иконка были выровнены по центру, соблазнительно сделать следующее:
что никогда не работает правильно…
Эти иконки расположены на один или два пикселя ниже центра, по крайней мере, на мой взгляд.
Но это легко исправить с помощью inline-flex:
Идеально выровненные иконки (и когда-нибудь мы сможем измерить размеры, используя единицы измерения lh!)
С помощью inline-flex или inline-grid вы получаете всю мощь флекс-бокс или системы сетки внутри блока, который располагается в линейном направлении.
Блоки, которые все равно можно переносить
На элементы inline-block влияет width. Это еще одно различие между ними и элементами inline. Люди привыкли к системам макета с помощью inline-block, потому что в принципе могут делать то, что дает float, но без float, что позволяет воспользоваться переносом, который происходит немного более элегантно, чем при float.
Идея встроенных блоков, которые ведут себя как столбцы, которые можно переносить (даже до 1 столбца), актуальна и по сей день, потому что это трюк, который можно использовать в HTML электронных письмах, чтобы реализовать многостолбцовые макеты, которые сворачиваются в один столбец на маленьком экраны без необходимости медиа-запросов (которые не поддерживаются некоторыми почтовыми клиентами).
transform для встроенных элементов
Встроенные элементы не могут принимать transform. Так что если вам это нужно, следует использовать inline-block.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CodePen Embed Fallback
Колонки-потомки, которые не разрываются посредине
CSS-колонки можно использовать в текстовых абзацах, если вас не волнует, разбит ли какой-либо из абзацев на столбцы. Но иногда CSS-столбцы используются для блоков, где это будет неудобно. Скажем, у блоков есть свои фоны и отступы. Разрывы возникают довольно странные.
Это странная уловка, которую я не могу сказать, что на 100% понимаю, но если вы добавите display: inline-block; для этих блоков (и, вероятно, width: 100%; — убедитесь, что они остаются по ширине столбца), то они не разорвутся и отступы будут сохранены.
Быстрый способ сделать список горизонтальным
Это был еще один мега-популярный ответ на мой оригинальный твит. Элементы списка укладываются вертикально, как элементы уровня блока. Они на самом деле не блоки. Они являются display: list-item;, что на самом деле важно, как мы их видим. Популярный вариант использования — «когда я хочу выложить список по горизонтали».
