html - 为什么文章之间有差距？

Question

我创建了一个包含三篇文章的部分，我想知道为什么文章之间有边距/填充:

我的 html:

<section id="home">

 <article>
<h1>Übersicht</h1>
 </article>
 <article>
<h1>Leute</h1>
 </article>
 <article>
<h1>Links</h1>
 </article>

 </section> 

还有我的CSS:

section { width: 87%;
    margin: 0px auto;
     }

article {
    width:33%;
    font-family: 'Open Sans', sans-serif;
    background-color:blue; 
    display: inline-block;
    margin:0px;
    padding: 0px;
}

Answer 1

尝试用 block 替换 inline-block 并使用 float:left 请看这个 fiddle

JSFIDDLE EXAMPLE