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

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

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

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

<nav>
  <a href="#">Один</a>
  <a href="#">Два</a>
  <a href="#">Три</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

Такой пример кода даст следующий результат:

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

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

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

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

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

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

<ul>
  <li>
   Один</li><li>
   Два</li><li>
   Три</li>
</ul>

или

<ul>
  <li>Один</li
  ><li>Два</li
  ><li>Три</li>
</ul>

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

<ul>
  <li>Один</li><!--
  --><li>Два</li><!--
  --><li>Три</li>
</ul>

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

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

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

nav a {
  display: inline-block;
  margin-right: -4px;
}

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

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

<ul>
  <li>Один
  <li>Два
  <li>Три
</ul>

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

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

nav {
  font-size: 0;
}

nav a {
  font-size: 16px;
}

Мэтт Стоу сообщает, что метод использования

text font-size: 0;

Смотрите исследование

Кроме того, имейте в виду, если вы задаёте величины в em

Другая странность! Даг Стюарт показал мне, что если использовать

text @font-face

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

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

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

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.