刪除DIV之間的像素而不刪除空白

.littlebox { margin:2px; padding:5px; width:100px; height:100px; border:1px solid #ccc; display:inline-block; } 
.divrow { width:100%; height:120px; } 


<div class="divrow"> 
    <div class="littlebox">first</div> 
    <div class="littlebox">second</div> 
    <div class="littlebox">third</div> 
</div> 

<div class="divrow"> 
    <div class="littlebox">first</div><div class="littlebox">second</div><div class="littlebox">third</div> 
</div>

這兩個呈現不同，在第一行中每個div之間有一個小空間，並在第二個沒有。將邊距設置爲0px仍然會使空間可見。刪除DIV之間的像素而不刪除空白

http://jsfiddle.net/F3f3C/

我知道浮動：左，而不是顯示：inline-block的不解決這個問題，但我不知道是否有辦法做到這一點不使用浮動。

來源

2014-04-06 Ekim

''我希望是一個錯字.. –

第二行具有在它們之間的空間因爲Chrome的檢測元素有'2px'的'margin'。 – Aiias

你需要整個事情像第一排一樣嗎？ –

在不改變HTML，你有兩個選擇：

設置父的字體大小，以零和復位內聯阻斷孩子的字體大小。
位置的元素絕對（可以由是通過浮動或位置是：絕對）

來源

2014-04-06 17:11:57 Nit

謝謝，第一個解決方案在這裏工作的是對任何對解決方案感興趣的人所做的更改的jsfiddle。 http://jsfiddle.net/2DFaq/1/ – Ekim

-1

問題是你正在使用內聯塊。因爲margin增加了som空間，但是inline-block總是會佔用一些空間。您可以浮動的div的，而不是

來源

2014-04-06 16:59:51 Johansrk

將margin設置爲0仍然會增加空間，並且我確實提到了我是否有辦法在不浮動div的情況下執行此操作 – Ekim

就像我聲明的那樣獲得空間時，使用內聯塊。 – Johansrk

如果你設置字體大小爲0，你將擺脫divs的空間。然後你可以在每個裏面都有另一個div，這又增加了字體大小 – Johansrk

刪除DIV之間的像素而不刪除空白

回答

相關問題