Как убрать отступ?

Question

[sabanovvv]

Откуда то берется отступ у li и никак не получается его убрать в чем проблема?

testjay.esy.es

Answer 1

[Андрей Ежгуров]

Если действительно inline-блоки, то между элементами вставляется пробел, который ты и видишь. Либо убирай все пробелы между элементами в html-коде (чтобы между закрывающим тегом первого таба сразу шёл открывающих тег второго - без пробелов, переводов строк и прочих символов между ними), либо сделай для обрамляющего их блока font-size: 0px; - чтобы шрифт между табами был нулевого размера.

Answer 2

[andreloster]

Удалите пробелы и переводы строк между тегами .
Это распространенная проблема при display: inline-block;

Answer 3

[Максим]

inline-block создают слева отступ то ли в 3, то ли в 4 пикселя. Можно отрицательный margin прописать.

Answer 4

[Alexander Mischuk]

http://toster.ru/search?q=li убрать отступ

Answer 5

[Петруша Укропов]

Если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.

Лечится указанием для элемента отрицательного отступа
margin-right: -4px;

habrahabr.ru/post/161581

Answer 6

[Тимофей Белоусов]

#hellotabs ul li{
display: inline-block;
font-family: helvetica;
padding: 10px 18px;
margin: 0;
cursor: pointer;
background: #cfcfcf;
font-size: 14px;
margin-right: -3px;
}

Answer 7

[Neash]

а я вот не люблю отрицательные отступы...
можно для li вместо "display: inline-block;" сделать "display:block; float: left;"
а в #hellotabs "overflow: hidden;" добавить

Answer 8

[call007]

Действительно, если списки li являются inline-block, то между ними образуются пробелы. Как вариант, можно не закрывать теги li, но если использовать вместо li надо div, то тут уже через css-костыли.

Потому давно искал решение на js, которое будет убирать эти пробелы между inline-block элементами, пока не смог "запилить" сам:

(function () {

    var list = document.querySelectorAll('.js-nospace'),
        listChild,
        i,
        j;

    for (i = list.length; i--;) {

        listChild = list[i].childNodes;

        for (j = listChild.length; j--;) {
            if (listChild[j].nodeValue !== null) {
                listChild[j].textContent = '';
            }
        }

    }

}());