Margins between li's out of nowhere - html

Question

So, i am creating a menu, and i noticed that there is some unexplainable margin between li's. It also can not be seen in dev's console. Here is the code:
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>
And, here is the 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;
}
Here is the screenshot of menu:
Thank you!

Answer 1

This looks like the space/new line characters between </li> and <li> tags. Try to write the markup as such:
<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>

Answer 2

The space is there is a 'side effect' (actually confusing but intended behavior) of how display: inline-block works. Inline block elements are rendered the same as inline elements, namely it assumes that they should be part of a line of text. Add to that the fact that HTML compresses all whitespace (space, tab, newline) into a single space and what happens is the newline character between each LI becomes a space character and you have a small visible gap between elements.
There are several methods to fight this. You might
Use negative margins to bump the elements back in line
Use zero-sized font
Use display: block and float: left
Use display: table
Remove all whitespace characters between LIs in your code
And there are other methods. Each has its own advantages and disadvantages.
A nice writeup of different solutions can be found here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

There are no margin between li element. the space between each li is related to your
width: 16.3%;
so you have 6 li element proportionally spaced ..
This mean that for each element the width is fixed..