White Space Troubling During use of Display Inline Elements

Solution 1: Apply font-size: 0px to the parent.

One of the most simple solutions for that is removing extra whitespace by applying font-size to 0 on the parent of inline-block elements.
By the applying font-size 0 to parent, need to mention child font-size different.

below are the example for that,

/* Parent*/
ul.inline-list 
{
   font-size: 0;
}
/*Child*/
ul.inline-list li
{
   font-size: 16px;
}

Solution 2: Minimize the HTML

Remove space between HTML elements by two method,

2.1. Drop Close Angle or Drop element Closing angle with the content

<ul class="inline-list">
<li><a href="element1.html">element 1</a></li
><li><a href="element2.html">element 2</a></li
><li><a href="element3.html">element 3</a></li>
</ul>

Or

<ul class="inline-list">
<li><a href="element1.html">element 1</a>
</li><li><a href="element2.html">element 2</a>
</li><li><a href="element3.html">element 3</a></li>
</ul>

2.2. Make all Element in Single Row

<ul class="inline-list">
<li><a href="element1.html">element 1</a></li><li><a href="element2.html">element 2</a></li><li><a href="element3.html">element 3</a></li>
</ul>

Solution 3: HTML Comments or Avoid Closing Tag for that

3.1 Simply apply HTML Comments between elements, start of the comment with first element and half of the close comment with second element.

<ul class="inline-list">
<li><a href="element1.html">element 1</a></li><!--
--><li><a href="element2.html">element 2</a></li><!--
--><li><a href="element3.html">element 3</a></li>
</ul>

Or

3.2 Avoid closing tag of each element

but I think this one is not a good way with the w3c markup validation.

<ul class="inline-list">
<li><a href="element1.html">element 1</a>
<li><a href="element2.html">element 2</a>
<li><a href="element3.html">element 3</a>
</ul>

Solution 4: Oppose Margin with the elements

First, remove display inline-block and another but undesirable solutions for that is to apply margin-left in negative value like margin-left value is -4px.

/*Child*/
ul.inline-list li
{
   /*Remove display: inline-block;*/
  margin-left: -4px;
}

It will affect all elements so you need to reset first child for that. li:first-child to reset margin as a zero value.

/*For Reset First Element Margin*/
ul.inline-list li:first-child
{
   /*Remove display: inline-block;*/
  margin-left: 0px;
}

Solution 5: Applying Flex

In case of acceptable browser support Use Flex Box for that, it is the best way to adjust this kind of spacing issue. Just apply display flex to parent, no need to apply anything to the child.

Below are the examples for that,

/* Parent*/
ul.inline-list 
{
   display: flex; display: -webkit-flex;
}

Solution 6: Applying Float

In place of display: inline-block; try to apply float between elements so this is a good way to adjust elements’ margin and padding.

/*Child*/
ul.inline-list li
{
   /*Remove display: inline-block;*/
  float: left;
}