Удаляем пустое пространство между inline-block элементами

При использовании inline-block элементов, все верстальщики зачастую встречают такую проблему, что между этими самыми элементами появляется какой-то непонятный отступ, с которым нужно как-то бороться.

Чтобы наглядно проиллюстрировать проблему, давайте создадим горизонтальное меню с использованием inline-block.

HTML

Допустим, HTML структура нашего меню выглядит следующим образом:

<nav class="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Уроки</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

CSS

Теперь зададим немного стилей:

.nav ul {
	list-style: none;
	text-align: center; /* Выравниваем пункты меню по центру */
}
.nav ul li {
	display: inline-block; /* Делаем пункты меню inline-block элементами, тем самым выстраивая их в одну горизонтальную линию */
	background: #c04646; /* Зададим фоновый цвет, чтобы увидеть границы наших пунктов меню */
}
.nav ul li a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

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

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

Откуда же берутся эти пустые области?

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

Если мы еще раз вспомним HTML разметку, то увидим, что каждый тег li находится на новой строке, а вот как раз подобного рода переносы на новую строку, любые пробельные символы или табуляции в нашей HTML разметке, будут восприняты как пробелы и будут выводится в браузере в виде тех самых пустых пространств.

<nav class="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Уроки</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

Теперь раз мы знаем природу возникновения этих пустых пространств, давайте разберем как с ними можно бороться.

Способ 1 - Удаляем пробелы, табуляции и переносы из HTML разметки

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

<nav class="nav">
<ul><li><a href="#">Главная</a></li><li><a href="#">Уроки</a></li><li><a href="#">Об авторе</a></li><li><a href="#">Контакты</a></li></ul>
</nav>

Таким образом, все наши элементы li будут вплотную прижаты в HTML разметке и точно также будут прижаты при отображении в браузере, т.е. мы избавимся от проблемы.

Способ 2 - Удаляем пробелы используя комментарии

Как мы видим, первый способ пусть и рабочий, но имеет большой недостаток, из-за того, что мы убрали переносы в нашей HTML разметке, то теперь код становится нечитабельным.

Поэтому на смену ему приходит второй способ, который убирает переносы, табуляции и прочее, посредством обычных HTML комментариев.

<nav class="nav">
<ul><!--
--><li><a href="#">Главная</a></li><!--
--><li><a href="#">Уроки</a></li><!--
--><li><a href="#">Об авторе</a></li><!--
--><li><a href="#">Контакты</a></li><!--
--></ul>
</nav>

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

Способ 3 - Удаляем закрывающие теги

В HTML есть некий набор тегов, которые пусть и имею закрывающий тег, но указывать его не обязательно.

К таким тегам относится и тег li, мы в нашей HTML разметке задаем ему открывающий тег, а вот закрывающий - нет. Данный подход также избавит нас от проблем с пустотами между пунктами меню.

<nav class="nav">
<ul>
<li><a href="#">Главная</a>
<li><a href="#">Уроки</a>
<li><a href="#">Об авторе</a>
<li><a href="#">Контакты</a>
</ul>
</nav>

При этом данный способ абсолютно валидный.

Способ 4 - font-size: 0 для родительского элемента

Все предыдущие способы были основаны на работе с HTML разметкой. Теперь же давайте разберем способ, который можно применять используя лишь CSS.

Его идея основана на том, что раз между пунктами меню появляется пробел, а пробел - это по сути обычный текстовый символ, следовательно, мы можем на него повлиять с помощью свойства font-size.

.nav ul {
	list-style: none;
	text-align: center;
	font-size: 0; /* Для родительского элемента задаем размер шрифта нуль, тем самым пробелы между пунктами исчезнут, ведь они будут равны нулю. */
}
.nav ul li {
	display: inline-block;
	background: #c04646;
	font-size: 16px; /* Обязательно для пунктов меню задаем размер, если мы этого не сделаем, то наша менюшка просто исчезнет. Ведь размер пунктов будет унаследован от тега ul, т.е. будет равен нулю */
}
.nav ul li a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

Таким образом, мы для тега ul зададим font-size: 0, а для его элементов font-size с любым другим значением, отличным от нуля.

Вот мы и разобрали основные способы борьбы с расстоянием между inline-block элементами. На практике вы можете применять любой из них.

Добавить комментарий