Содержание
Откуда берутся отступы между элементами с display: inline-block и как их убрать? Отступы нигде не фиксируются:
4 ответа 4
Дело в том, что inline-block рендерится браузером как буква. Расстояние, которое вы видите между inline-block и соседними "буквами" — обычный межбуквенный интервал или, если брать термин из типографики, трекинг.
Трекинг не является фиксированным значением и меняется в различных семействах шрифтов, а также зависит от размера шрифта. Из-за этого мы не можем использовать для решения этой проблемы фиксированные значения в свойствах word-spacing , margin и т.д.
Эффективно убрать отступы у inline-block можно несколькими способами:
Вариант 1
В разметке убираем переносы для кнопок.
Вариант 2
На родителя ставим font-size: 0 , а уже к button задаём нужный размер шрифта.
Вариант 3
Можно закомментировать конец и начало строки:
Всем хорошо свойство display:inline-block
- его можно использовать вместо float:left для выстраивания объектов верстки, при этом не заморачиваясь со всякими clearfix и отступами
- оно поддерживает вертикальное выравнивание vertical-align, что еще важнее и недооценить это невозможно!
Но, так же оно имеет и ряд недостатков
- черезжопно поддерживается старыми версиями «Осла» (IE7 и ниже), а также совсем старыми версиями FF, на что можно забить, и как то странно отображается в Opera и Safari
- между inline-block объектами образуются загадочные отсутупы, которые портят всю малину
Второй же пункт возникает из-за наличия пробелов и переносов строк в коде. Если убрать переносы, то все станет красиво, но не читабельно с точки зрения кода. А решается различными вариантами, вот один из них.
Для фикса данного глюка нужно родителю нашего объекта задать определенные свойста. Рассмотрим на примере списка
Обычно достаточно родителю выставить размер шрифта в ноль, а потомку тот размер, который должен быть по задумке верстки. Но с Оперой это как то не работает…
И еще заметил, что letter-spacing: -1px; стал лажать в последнем FireFox (26.0 на данный момент) и вместо него лучше ставить
Если на странице несколько inline-block’ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.
Лечится указанием для элемента отрицательного отступа
margin-right: -4px;
Действительно, если списки li являются inline-block, то между ними образуются пробелы. Как вариант, можно не закрывать теги li, но если использовать вместо li надо div, то тут уже через css-костыли.
Потому давно искал решение на js, которое будет убирать эти пробелы между inline-block элементами, пока не смог "запилить" сам: