html - Space between nowrap inline blocks

Question

This question already has answers here:

Answer 1

That's because of a space character between inline(-block) elements (a line break and a few tabs counts as a space), This could be fixed by commenting that space out this way:

<div style="background: red;"></div><!-- 
 --><div style="background: yellow;"></div><!-- 
 --><div style="background: green;"></div><!-- 
 --><div style="background: blue;"></div>

Online Demo.

Actually, it's not a bug, it's the normal behavior of the inline elements; Just like when you place an image next to a line of text, or put a button next to an input element.

There are couple of ways to remove the space between inline(-block) elements:

• Minimized the HTML
• Negative margins
• Comment the white space out
• Break the closing tag
• Set the font size of the parent to zero then reset that for children
• Float the inline items instead
• Use flexbox

Check the Chris Coyier's Article, or these similar topics on SO:

• Why is there a gap between image and navigation bar
• How to remove the space between inline-block elements?
• A Space between Inline-Block List Items
• How to remove "Invisible space" from HTML