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

Question

我有6個DIV display:inline-block一行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

因為它們被設置為內聯塊，這意味着它們之間的空白被視為內聯空格，因此呈現為內聯空格。 您可以通過將所有div放在html中的一行或將空白包裝在注釋中來解決此問題：

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

Answer 2

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

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

檢查這個http://jsfiddle.net/y7L7q/1/

要么

寫下這樣的標記：

<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 3

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

一切都在這個問題上： CSS：間距問題與下拉列表

Answer 4

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

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

另請注意，font-size：0在我看來不是正確的方法，因為它會弄亂這些div中的內容。