The following code will make a extra margin on the page layout which is hard to inspect. The extra margin is added since there are extra spaces in the text.

<style>
	span {
	  display: inline-block;
	  width: 100px;
	  background-color: orange;
	}
</style>

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

Following way can fix this issue:

Removing the whitespace between the inline-block elements in the HTML.
Using CSS solutions like font-size: 0 on the parent and setting a sensible font-size on the children can work, but have some browser compatibility issues.
Using Flexbox to do layout with inline-block element.
CSS3 properties like white-space-collapsing: discard could potentially solve this, but they are not yet widely implemented.