Борьба с пробелами между блочно-строчными элементами

Несколько раз встречал обсуждение проблемы пробелов в твиттере, а затем увидел интересный дабблет на эту тему, поэтому решил зафиксировать.

Проблема вот в чём: между блочно-строчными элементами в браузере появляются пробелы, если вы форматируете HTML-код как обычно.

Другими словами.

Приведённый пример кода даст следующий результат:

Это крайне нежелательное явление.

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

Это не «баг» (по крайней мере, я не думаю, что это баг). Просто так работает принцип расположения элементов в строчку. Ведь вы же хотите, чтобы между словами, которые вы печатаете через пробел, этот пробел был? Пробелы между этими блоками — почти то же самое, что пробелы между словами. При этом я допускаю, что спецификацию можно усовершенствовать и прописать, что пробелов между блочно-строчными элементами быть не должно, но я уверен, что мало кто решится открыть этот ящик Пандоры.

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

Убрать пробелы

Причина, по которой у вас получаются пробелы, в том, что у вас есть пробелы между элементами (на самом деле, перенос строки и знаки табуляции воспринимаются как пробел). Решить проблему поможет минимизированный HTML-код или любая из следующих хитростей:

или

или с комментариями

Это всё довольно хитрые способы, но они делают своё дело.

Отрицательный внешний отступ

Можно подвинуть элементы, чтобы они стояли, как нужно, используя внешний отступ c отрицательным значением −4px. (возможны вариации значения в зависимости от размера шрифта у родительских элементов). Этот способ может некорректно работать в старых версиях IE (6 и 7), но если вам плевать на отображение в этих браузерах, вы хотя бы сможете сохранить в чистоте форматирование кода.

Не использовать закрывающий тег

Для HTML5 так делать — в порядке вещей. Хотя, стоит признать, становится немного не по себе.

Установить размер шрифта пробела, равный нулю

Пробел, имеющий нулевой размер шрифта, равен… нулю.

Мэтт Стоу сообщает, что метод использования font-size: 0; вызывает некоторые трудности на Андроиде. Цитата: «в версиях до Jellybean пробел не исчезает вообще, а в Jellybean есть баг, когда перед последним элементом иногда случайно возникает маленький пробел». Смотрите исследование.

Кроме того, имейте в виду, если вы задаёте величины в em, то с использованием нулевого размера шрифта могут быть проблемы, поскольку при наследовании em-ов от ближайшего родителя все дочерние элементы будут также иметь размер шрифта 0. В этом случае вам помогут rem, или абсолютные (не относительные) единицы задания размера шрифта.

Другая странность! Даг Стюарт показал мне, что если использовать @font-face с этой техникой, то в браузере Сафари версии 5.0 шрифты потеряют сглаживание.

Пусть они лучше плавают!

Может быть, им вообще необязательно быть блочно-строчными элементами, может, можно задать их расположение при помощи свойства float? Это позволит вам задать им и ширину, и высоту, и внутренние отступы, и всё остальное. Но при этом вы не сможете выровнять их так же, как блочно-строчные элементы, используя свойство text-align: center; у родителя. Ну, вообще… вы в каком-то смысле сможете это сделать, но выглядит это очень странно.

Используйте вместо этого flexbox

Если вас устраивает список поддерживаемых браузеров, а также все, что вам нужно от блочно-строчных элементов — это их выравнивание по центру, вы вполне можете воспользоваться flexbox. Это не совсем замена блочно-строчным элементам, но вы сможете добиться от него того, чего хотите.

Смотреть все примеры на CodePen

---

Это перевод статьи Криса Койера — «Fighting the Space Between Inline Block Elements».