为什么这些文章之间存在差距？

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

尝试用块替换内联块并使用float:left请看这个小提琴

JSFIDDLE EXAMPLE

Answer 2

display:inlin-block元素之间有空格。只需删除它们，例如：

<section id="home">
    <article><h1>Übersicht</h1></article><!--
    --><article><h1>Leute</h1></article><!--
    --><article><h1>Links</h1></article>
</section>

或者：

<section id="home">
    <article><h1>Übersicht</h1></article><article><h1>Leute</h1></article><article><h1>Links</h1></article>
</section>

JSFiddle

或者将font-size:0;添加到父容器example。

Answer 3

任何两个inline或inline-block元素都会在它们之间呈现空格，即使您在标记中有多个空格/新行将它们分开。

例如，这3个div将全部呈现hello world：

<div>hello world</div>

<div>hello
world</div>

<div>

   hello


       world
</div>

这是因为文本节点为inline。

在您的情况下，您需要确保，开头<article>紧接在上一次结束</article>之后：

<section id="home">
 <article>
<h1>Übersicht</h1>
 </article><article>
<h1>Leute</h1>
 </article><article>
<h1>Links</h1>
 </article>

 </section>

jsFiddle

采用上面的示例，这里你不想要hello world，你想要helloworld，所以只需删除标记中这两个单词之间的任何空格。

Answer 4

您的浏览器会自动添加空格。

一个广泛接受的解决方法是将font-size:0添加到父容器，然后为子元素添加合理的字体大小

在你的情况下，你会这样做：

section {
    font-size: 0;     //Must be zero
}

article {
    font-size: 10px;  //can be anything you want

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

Answer 5

显示内联块正是它的本质。具有块属性的内联元素。因此，如果元素之间有空格/换行符，则会增加间隙。

我建议在这种情况下使用display：block和float：left。此方法还添加了对旧版浏览器的支持。如果您更喜欢使用内联块，请删除空格，以便元素的结束标记和开始标记直接相邻。

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/