CSS – как убрать промежутки между inline блоками?

Как убрать пространство между элементами inline-block. Рассмотрим несколько вариантов решения этой задачи.

Пусть у нас будет список, элементы которого необходимо выстроить в один ряд

<ul class="ex1">
  <li>Элемент списка №1</li>
  <li>Элемент списка №2</li>
  <li>Элемент списка №3</li>
  <li>Элемент списка №4</li>
</ul>

Выделим элементы списка красным фоном для наглядности

#content li {
	display: inline-block;
	background: #f00;
	padding: 3px;
}

Откройте демо-пример, для просмотра результатов работы разных подходов:

Пример №2 - inline блоки с разметкой блок в блок

Если вы находите этот метод для вас удобным, то он весьма рабочий и кроссбраузерный. Записав верстку элементов с inline-block в один ряд мы добьемся решения проблемы с whitespace`ом между блоками.

<ul class="ex2">
   <li>Элемент списка №1</li
  ><li>Элемент списка №2</li
  ><li>Элемент списка №3</li
  ><li>Элемент списка №4</li>
</ul>

Пример №3 - inline блоки с font-size:0;

Если добавить родительскому элементу (ul) font-size:0; а самим элементам списка (li) задать нормальный размер шрифта, то тем самым мы уберем промежуток между блоками.

ul {font-size:0}
ul li {font-size:16px;}

Но у этого способа могут возникнуть проблему на платформе Android и при задании размера в процентах или em.

Пример №4 - inline блоки с letter-spacing:-4px;

Подход тот же что и с размером шрифта, задаем отрицательное значение для родителя и нулевое для потомков.

ul {letter-spacing: -4px;}
ul li {letter-spacing: 0;}

Пример №5 - inline блоки с не закрытым тегом li

<ul class="ex5">
  <li>Элемент списка №1
  <li>Элемент списка №2
  <li>Элемент списка №3
  <li>Элемент списка №4
</ul>

Этот вариант работает, но он справедлив для тега li c другими такой вариант не пройдет.

Пример №6 - использовать float вместо inline

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

ul li {float: left;}

Метки: CSS

Рубрика: Как сделать?