White space occurs when having divs stated as inline-block

I’m building a colorbar out of divs to have them separate each section on my project.
Each bar is 10% width, 10px height and inline-block. They are placed inside a wrapper div (tried wit section but same problem occurred) with no padding or no margin.
However, I get a very annoying white space at the top and bottom of my bars.

This occurs in the Webflow designer, as well on the published sites both in Chrome and Safari.
I reproduced my colorbar structure on Codepen and even over there I get this white space.

If I set the colorbars to height: auto and put height to the div or section instead, the colorbars don’t respect that height value either and overflow my div vertically.

Somebody have a clue what this is about?

Codepen: http://codepen.io/stevenpersson/pen/KdJdPG
Preview site: https://preview.webflow.com/preview/newulrikabeijer?preview=c19e6520c857e41e3f223411a2748fa5
Published site: http://newulrikabeijer.webflow.io/

Here is my public share link: LINK
(how to access public share link)

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.