Space between nowrap inline blocks [duplicate]

Question

I want to have several block elements next to each other, which take the full browser width.

With white-space: nowrap, it works quite well, but there is a random space of a few pixels in between one element and another:

body { margin: 0; padding: 0; }
#container1 { white-space: nowrap; position: absolute; width: 100%; }
#container1 div { display: inline-block; width: 100%; height: 200px; }

<div id="container1">
    <div style="background: red;"></div>
    <div style="background: yellow;"></div>
    <div style="background: green;"></div>
    <div style="background: blue;"></div>
</div>

Here is the jsBin Demo.

It is no padding, no margin, no border, no offset.

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