爲什麼不是這4個div彼此相鄰？（寬度25％）

請問您能向我解釋爲什麼這4個div不會彼此相鄰？有4個div，我將它們的寬度設置爲25％，因此它們填充整個頁面，但1個div被推到其他的下面。我必須將寬度設置爲24％，讓它們彼此相鄰。怎麼來的？在我的書中4x25％= 100％。爲什麼不是這4個div彼此相鄰？（寬度25％）

.four { 
    display: inline-block; 
    vertical-align: top; 
    width: 25%; 
}

A「輸入」的HTML代碼等於一個空間，如果去掉這些空間</div><div>，你就會失去inline-blocks（一般或inline要素）之間的空間。

沒有必要去爲float:left;，box-sizing，word-spacing或任何similair除非你想你的代碼好看。

2014-03-02 21:55:34 Marcel

This答案是最有意義的。 – Morpheus

我一直在網絡應用程序工作多年，今天是我第一次意識到這一點......謝謝！ – Leogout

是因爲display: inline-block具有要素之間的自然間距。您可以使用float: left代替：

2014-03-02 21:52:49 jmore009

之間移除任何空白你所說的「自然空間」意思？它是瀏覽器的默認值？ http://jsfiddle.net/cm2K6/8/ – Morpheus

是的，你可以在這裏閱讀更多關於這個和一些解決方案：（http://stackoverflow.com/questions/1833734/display-inline-block-extra- margin） – jmore009

@Morpheus是的，這是內聯流中內聯元素的正常行爲。就像你把圖像放在另一個圖像旁邊一樣;或者在文本輸入旁邊放置一個按鈕。 –

訣竅是不要在div之間的HTML中留出空格。我知道這很奇怪，但它很有用。如果您仍想保留內聯塊，則可以使用margin-right: -1%，否則請使用浮動元素。

2014-03-02 21:56:07 radubogdan

對於這個特殊的問題。我建議你閱讀[this]（http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/）去搜索「The Whitespace Issue」。謝謝 – radubogdan

@MrLister的意思是間距不是由'display'屬性引起的。 – digitalextremist

另外，空間不是1％。 –

內聯和inline-block的元素，讓單一顯著空白字符影響其佈局的</div>和<div>標籤

2014-03-02 21:56:12 berkeleybross

爲什麼不是這4個div彼此相鄰？ （寬度25％）