nowrap內聯塊之間的空間

我想要有幾個塊元素彼此相鄰，這需要完整的瀏覽器寬度。nowrap內聯塊之間的空間

隨着white-space: nowrap，那很好，但有幾個像素的隨機空間中的一個元素，另一間：

body { margin: 0; padding: 0; } 
#container1 { white-space: nowrap; position: absolute; width: 100%; } 
#container1 div { display: inline-block; width: 100%; height: 200px; }

<div id="container1"> 
    <div style="background: red;"></div> 
    <div style="background: yellow;"></div> 
    <div style="background: green;"></div> 
    <div style="background: blue;"></div> 
</div>

這裏是jsBin Demo。

它沒有填充，沒有邊距，沒有邊框，沒有偏移量。

來源

2014-02-19 Christoph Bühler

我看不到任何空格。甚至不是像素。 – SaturnsEye

http://css-tricks.com/fighting-the-space-between-inline-block-elements/檢查了這一點：http://jsbin.com/peqevamu/4/edit –

你必須滾動到右邊..有一個約8px的空間旁邊的彩色塊..（在IE，Chrome，Firefox中測試）Windows 7. –

這是因爲內聯（嵌段）元素（換行和一些標籤算作一個空格）之間的空格字符，這可能是固定首先指出，空間了這種方式：

<div style="background: red;"></div><!-- 
--><div style="background: yellow;"></div><!-- 
--><div style="background: green;"></div><!-- 
--><div style="background: blue;"></div>

Online Demo。

實際上，這不是一個錯誤，它是內聯元素的正常行爲;就像當你在一行文字旁邊放置圖像，或者在輸入元素旁邊放置一個按鈕一樣。

有幾個辦法來消除直列之間的空間（嵌段）元素：