我将边距和填充设置为0.为什么元素之间有空格？

Question

我希望红色矩形之间没有空格，所以我检查了所有相关的属性是零：边距，填充和边框。但仍有空间。为什么？我该如何解决？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

空间来自换行符。使用浮动元素或删除两个div之间的空格：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;