Методы соединения элементов inline-block

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

demosourse

То есть структура:

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

Со стилями:

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

Будет выведена вот так:

Стандартное         форматирование inline-block

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

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

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

 

Удаляем пробел

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

Вот так:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Или так:

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

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

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

Смешно, но работает!

 

Отрицательное значение поля

Можно сдвинуть элементы с помощью установки отрицательного значения для поля (конкретную цифру надо определять в зависимости от размера шрифта). Такой подход имеет проблемы в старых IE (6 & 7), но если данные браузеры исключены из списка поддержки, то можно сохранить код разметки без выше описанных ломок.

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

 

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

HTML5 воспримет и такую структуру. Однако такой метод выглядит дико.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

 

Устанавливаем нулевой размер шрифта

Размер пробела при свойстве font-size, имеющим значение 0, также будет нулевой ширины.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
} 

 

Используем блочные элементы

Может быть, имеет смысл отказаться от использования строчных элементов в данном случае. Задача легко решается блочными элементами со смещением. Такой подход позволит устанавливать ширину, высоту и отступы. Однако вы не сможете центрировать их с помощью свойства text-align: center; в родительском элементе.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/fighting-the-space-between-inline-block-elements/
Перевел: Сергей Фастунов
Урок создан: 20 Апреля 2012
Просмотров: 36568
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

    Если вы хотите существенно повысить уровень безопасности вашего сайта на WordPress, то вам не избежать конфигурации файла .htaccess. Это позволит не только уберечься от целого ряда хакерских атак, но и организовать перенаправления, а также решить задачи связанные с кэшем.

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

^ Наверх ^