I set margin border and padding to 0. Why there is a space between elements?

Question

I want no space between red rectangles, so I checked that all related properties are zero: margin, padding and border. But there is still space. Why? How can I fix it?

 .outer {
    height: 100px;
    width: 600px;
    background-color: grey;
}
.bar {
    background-color: red;
    height: 20px;
    width: 45%;
    display: inline-block;
    margin-top: 20px;
}

<div class="outer">
    <span></span>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

Answer 1

The space comes from the line break. Either use floating elements or remove the whitespace between the two divs:

 .outer {
    height: 100px;
    width: 600px;
    background-color: grey;
}
.bar {
    background-color: red;
    height: 20px;
    width: 45%;
    display: inline-block;
    margin-top: 20px;
}

<div class="outer">
    <span></span>
    <div class="bar"></div><div class="bar"></div>
</div>