为什么文章之间有差距？

Question

我创建了一个部分与三篇文章，即时知道为什么有一个保证金/填充betwenn的文章：

我的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

尝试与块代替inline-block的，并使用float:left请参阅此琴

JSFIDDLE EXAMPLE

Answer 2

显示内联块正是它是什么。具有块属性的内联元素。所以说如果你在元素之间有空白/换行符，它会增加一个空白。

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

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

Answer 3

还有就是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 4

任何两个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 5

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

针对此widly接受的解决办法是通过增加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; 
}