Many times when we use inline or inline-block elements while creating a HTML, then we see the minor space appear between two elements. This problem usually happens with all html developer, so below we will discuss the solution to this problem.

For example we have 2 <span> inside a <div>

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

span {
  display: inline-block;
  width: 100px;
  background-color: red;
} 

Old but Gold method –

This is very old method but still it works – 

you need to remove gap between start and end tag (which is inline or inline-block)

<ul>
     <li>Item 1</li
     ><li>Item 2</li
     ><li>Item 3</li>
 </ul>

Or you can add blank comments tag :

  <ul>
     <li>Item 1</li><!--
     --><li>Item 2</li><!--
     --><li>Item 3</li>
 </ul>

Another old trick –

Here is another old trick to solve this -

Add font-size:0 on parent element and boom it will work. 

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

p {
  font-size: 0px;
}
span {
  display: inline-block;
  width: 100px;
  background-color: red;
}