爲什麼文章之間有差距？

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; 
}