Пространство между строчно-блочными элементами в HTML

Css
article image

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

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

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

1
2
3
4
5
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>
1
2
3
4
5
nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

Результат будет таким:

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

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

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

Удаление пробелов

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

1
2
3
4
5
6
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

или

1
2
3
4
5
<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

или с помощью комментариев

1
2
3
4
5
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Примеры выше предполагают сохранение разметки списка. Иначе можно просто все элементы списка написать в одну строку.

1
2
3
<ul>
  <li>one</li><li>two</li><li>three</li>
</ul>

Да, необычно, но работает.

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

Вы можете сдвинуть элементы на место, применив отрицательный отступ в 4px. (Может потребоваться корректировка в зависимости от размера шрифта родителя).

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

Пропуск закрывающего тега

HTML5 это все равно не волнует, хотя выглядит очень странно.

1
2
3
4
5
<ul>
  <li>one
  <li>two
  <li>three
</ul>

Размер шрифта 0

Пробел с font-size: 0 по ширине равен... 0

1
2
3
4
5
6
nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}
В некоторых старых версиях Андроида есть проблемы с font-size: 0. Такая конструкция не удаляет пробелы а иногда, и нарушает размеры последнего символа. А так же в старых версиях Safari текст может потерять сглаженность.

Просто используйте flexbox

Вместо всего этого можно просто использовать flexbox. Да, это немного разные модели элементов, но он позволяет добиться нужного результата.

Примеры на CodePen

See the Pen Ways to handle space between inline-block elements by Chris Coyier (@chriscoyier) on CodePen.

Источник: https://css-tricks.com/fighting-the-space-between-inline-block-elements/