`display：inline-block`-elements奇怪的邊距

Question

我有6 DIV s與display:inline-block在一行中。但是他們之間有一個奇怪的空白空間，我怎麼能擺脫它？它們應該放在一條容器中。

小提琴：http://jsfiddle.net/y7L7q/

HTML：

<div id="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

CSS：

#container{ 
    width:300px; 
    border:1px solid black; 
} 
.box{ 
    display:inline-block; 
    height:50px; 
    width:50px; 
    background-color:black; 
    margin:0; 
    padding:0; 
} 

Answer 1

寫font-size:0;。就像這樣：

#container{ 
    width:300px; 
    border:1px solid black; 
    font-size:0; 
} 

入住這http://jsfiddle.net/y7L7q/1/

OR

寫您的標誌是這樣的：

<div id="container"> 
    <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> 
</div> 

入住這http://jsfiddle.net/y7L7q/2/

Answer 2

這是一個與的一個常見問題。你有幾個解決方案，刪除新行（或評論他們：http://jsfiddle.net/eaqfk/），設置font-size: 0，設置margin-right: -4px。

一切都是這樣的問題：CSS: Spacing issue with dropdown

Answer 3

因爲它們被設置到內聯塊，這意味着他們之間的空格被視爲行內空白，因此呈現爲這樣。你可以把所有的div在一行中的HTML或包裹在白色空間中的註釋通過兩種解決這個問題：

<div class="box"></div><!-- 
--><div class="box"></div> 

Answer 4

而是顯示：inline-block的，使用浮動：左刪除不需要的空間。看一下這個。

http://jsfiddle.net/y7L7q/9/

還要注意的是字體大小：0是不是在我看來，正確的方法，因爲它會弄亂這些div裏面的內容。