html - 为什么这个空格在 HTML/CSS 中很重要？

Question

给定下面的代码（两个 50% 宽度的 div，在一个 100% 宽度的容器内），为什么 div “bar” 的结束标记后的空格会影响渲染（至少在 Chrome 和 FireFox 中）？

<style>
* {
border:0;
margin:0;
padding:0;
box-shadow:0 0 1px 0px silver;
}
.foo {
width: 100%;
}
.bar {
width: 50%;
display: inline-block;
text-align: center;
}
</style>
<div class="foo">
    <div class="bar">
        ...a new customer
    <!-- the whitespace between the following divs affects rendering - why? -->
    </div> <div class="bar">
        ...an existing customer
    </div>
</div>