Поля между ли из ниоткуда

Question

Итак, я создаю меню, и я заметил, что между li есть какая-то необъяснимая разница. Его также нельзя увидеть в консоли разработчика. Вот код:HTML

<div class="navbar">
                <ul class="navbar_ul">
                    <li class="navbar_list_item navbar_main">Point Blank</li>
                    <li class="navbar_list_item navbar_main">Tanki Online</li>
                    <li class="navbar_list_item navbar_main">Dota 2</li>
                    <li class="navbar_list_item navbar_main">Warface</li>
                    <li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
                    <li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
                </ul>
            </div>

И вот CSS:

.navbar_list_item {
        display: inline-block;
        }
.navbar, .navbar ul, .navbar li {
        text-align: center;
        padding: 0;
        }

    .navbar_ul {
        width: 100%;
        }

    .navbar_list_item {
        color: white;
        width: 16.3%;
        margin: 0;
        height: 40px;
        }

    .navbar_main {
        background-color: #3978C2;
        }

    .navbar_minor {
        background-color: #2E3A86;
        }

Вот скриншот меню: Спасибо!

Answer 1

Это похоже на символы пробела / новой строки между </li> а также <li> теги. Попробуйте написать разметку так:

<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>

Answer 2

Пространство есть "побочный эффект" (на самом деле сбивает с толку, но предполагаемое поведение) того, как display: inline-block работает. Элементы встроенного блока отображаются так же, как и встроенные элементы, а именно предполагается, что они должны быть частью строки текста. Добавьте к этому тот факт, что HTML сжимает все пробелы (пробел, табуляция, символ новой строки) в один пробел, и в результате получается, что символ новой строки между каждым LI становится символом пробела, и у вас есть небольшой видимый разрыв между элементами.

Есть несколько методов, чтобы бороться с этим. Ты можешь

• Используйте отрицательные поля, чтобы вернуть элементы в линию
• Использовать шрифт нулевого размера
• использование display: block а также float: left
• использование display: table
• Удалите все пробельные символы между LI в вашем коде

И есть другие методы. У каждого есть свои преимущества и недостатки.

Хорошее описание различных решений можно найти здесь: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

Между элементом li нет поля. пространство между каждым ли связано с вашим

   width: 16.3%;

так что у вас есть 6 li элемент пропорционально разнесены..

Это означает, что для каждого элемента ширина фиксирована.