即使邊距和填充爲零，Div仍然有空格

Question

我遇到了無法移除div之間空格的問題。我已經包含了我的標記和CSS以及小提琴：http://jsfiddle.net/kW5uW/12/

儘管設置了保證金並且padding歸零，但我仍然可以看到div之間的空格，如何刪除它？我希望所有的盒子都緊挨着對方。

CSS和標記：

.segment { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: grey; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.container { 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<div class="container"> 
 
    <div class="segment"></div> 
 
    <div class="segment"></div> 
 
    <div class="segment"></div> 
 
    <div class="segment"></div> 
 
    <div class="segment"></div> 
 
</div>

任何意見，將不勝感激。謝謝。

Answer 1

內聯元素對空白區域很敏感。解決這個問題的方法之一是隻刪除的div之間的空格：

<div class="container"> 
    <div class="segment"></div><div class="segment"></div><div class="segment"></div><div class="segment"></div><div class="segment"></div> 
</div> 

jsFiddle example

你還可以：

• 浮法他們離開（jsFiddle example）
• 將父div的字體大小設置爲零（jsFiddle example）
• 採取了HTML註釋（jsFiddle example）的空白

Answer 2

我能解決這個問題，通過更改segmentCSS類以下幾點：

.segment { 
    width: 20px; 
    height: 20px; 
    background: grey; 
    border: 1px solid black; 
    display: block; 
    float: left; 
    padding: 0px; 
    margin: 0px; 
}