От автора: значение display inline-block является классическим! Оно не ново, и поддержка браузеров — это не то, о чем вам стоит беспокоиться. Я уверен, что многие из нас достигают этого интуитивно. Но давайте поставим точку в этом вопросе. Для чего это на самом деле полезно? Когда вы выбираете его среди других, возможно, похожих, вариантов?
Кнопки
Самый распространенный ответ, который я услышал, был: я всегда использую его для кнопок.
В конечном итоге, я думаю, что это имеет смысл, но это способствует тому, что я вижу, как небольшое недоразумение. Идея заключается в том, что вы хотите получить элементы, которые выглядят как кнопки (которые могут быть обработаны с помощью <a>, <button> или, возможно <input>), чтобы встроить их — но иметь поля и отступы. Это небольшое недоразумение: display: inline; элементы тоже могут иметь margin и padding, и они, вероятно, ведут себя так, как вы ожидаете.
Сложность в том, что:
Граница в направлении блока для встроенных элементов полностью игнорируется
Отступ встроенных элементов не влияет на высоту строки текста.
Таким образом, хотя сами кнопки в значительной степени хорошо оформлены, родительский элемент и окружающий текст, вероятно, нет. Вот демо:
Отступ встроенных кнопок вырывает их из контейнера, что немного странно.
Ситуация ухудшается, когда появляется обтекание с помощью встроенных кнопок:
Так что да, inline-block для кнопок имеет смысл. Но…
Не забывайте о inline-flex и inline-grid
Со значениями display inline-flex и inline-grid вы получите все то же хорошее поведение, что и у inline-block, но элементы (часто кнопки) могут выиграть от более мощной встроенной системы макетов. Возьмем пример кнопок с иконками, например:
<a href="#" class="button> <svg> ... </svg> Text </a>
Чтобы текст и иконка были выровнены по центру, соблазнительно сделать следующее:
.button svg { vertical-align: middle;
}
что никогда не работает правильно…
Эти иконки расположены на один или два пикселя ниже центра, по крайней мере, на мой взгляд.
Но это легко исправить с помощью inline-flex:
.button { display: inline-flex; align-items: center;
}
Идеально выровненные иконки (и когда-нибудь мы сможем измерить размеры, используя единицы измерения lh!)
С помощью inline-flex или inline-grid вы получаете всю мощь флекс-бокс или системы сетки внутри блока, который располагается в линейном направлении.
Блоки, которые все равно можно переносить
На элементы inline-block влияет width. Это еще одно различие между ними и элементами inline. Люди привыкли к системам макета с помощью inline-block, потому что в принципе могут делать то, что дает float, но без float, что позволяет воспользоваться переносом, который происходит немного более элегантно, чем при float.
Идея встроенных блоков, которые ведут себя как столбцы, которые можно переносить (даже до 1 столбца), актуальна и по сей день, потому что это трюк, который можно использовать в HTML электронных письмах, чтобы реализовать многостолбцовые макеты, которые сворачиваются в один столбец на маленьком экраны без необходимости медиа-запросов (которые не поддерживаются некоторыми почтовыми клиентами).
transform для встроенных элементов
Встроенные элементы не могут принимать transform. Так что если вам это нужно, следует использовать inline-block.
Колонки-потомки, которые не разрываются посредине
CSS-колонки можно использовать в текстовых абзацах, если вас не волнует, разбит ли какой-либо из абзацев на столбцы. Но иногда CSS-столбцы используются для блоков, где это будет неудобно. Скажем, у блоков есть свои фоны и отступы. Разрывы возникают довольно странные.
Это странная уловка, которую я не могу сказать, что на 100% понимаю, но если вы добавите display: inline-block; для этих блоков (и, вероятно, width: 100%; — убедитесь, что они остаются по ширине столбца), то они не разорвутся и отступы будут сохранены.
Быстрый способ сделать список горизонтальным
Это был еще один мега-популярный ответ на мой оригинальный твит. Элементы списка укладываются вертикально, как элементы уровня блока. Они на самом деле не блоки. Они являются display: list-item;, что на самом деле важно, как мы их видим. Популярный вариант использования — «когда я хочу выложить список по горизонтали».
Итак, у вас есть список…
<ul> <li>Three</li> <li>Little</li> <li>Piggies</li> </ul>
Вы хотите разместить их подряд…
li { display: inline-block;
}
И вы получили это.
Я быстро прослушал это в VoiceOver, и список inline-block по прежнему объявляется как список, но не объявляются пункты, что имеет смысл, поскольку их там нет. В том-то и дело с изменением самих display элементов списка list-item: они теряют свою, хм, списочность.
Альтернативой было бы сделать родительский контейнер flexbox…
ul { display: flex;
}
… Что задает горизонтальный ряд (по умолчанию для flexbox), но оставляет маркеры, поскольку вы не меняете отображение самих элементов списка. Вы можете удалить их вручную, если хотите.
Центрированные списки
Говоря о списках, Джефф Старр только что описал в блоге идею списков в центрированном тексте, что также может быть неуклюжим. Неловко то, что текст внутри элементов списка может быть отцентрирован, но сам элемент списка по-прежнему имеет полную ширину, создавая ситуацию, когда маркер остается выровненным по левому краю.
Решение Джеффа было — inline-block для всего списка. При этом список остается таким же широким, как и естественная ширина содержимого, позволяя маркерам смещаться от левого края и перемещаться с центрированным содержимым. Пока есть элементы уровня блока до и после, это хорошее решение.
В качестве альтернативы, если цель состоит в том, чтобы уменьшить ширину списка до ширины содержимого, это также может быть достигнуто следующим образом без остановки для списка отображения на уровне блока:
ul { width: max-content; margin: 0 auto; text-align: left;
}
Есть еще одна сложная вещь с inline-block. Как и элементы inline, любой пробел между ними по сути представляет собой пространство. Таким образом, два элемента inline-block шириной 50% не помещаются на линии, если между ними есть пробелы. Хорошо, что есть хитрости, чтобы это исправить.
Я говорю «привык», потому что, если бы вы собирались сегодня создать систему столбцов, вы почти наверняка использовали бы flexbox или grid — или вообще не создавали бы «систему», потому что простое использование их синтаксиса в значительной степени сводит на нет необходимость система в первую очередь.
Автор: Chris Coyier
Источник: https://css-tricks.com
Редакция: Команда webformyself.
