Streaming live at 10am (PST)

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?

Preview site:
Published site:

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.