邊距，邊框，填充和大小不會如預期的那樣相加

Question

我有一個基本的HTML和CSS的簡單場景，邊界框測量不會在寬度方向上相加。

預期結果是通過將列寬設置爲324 px來獲得的，儘管320 px似乎是合適的。在以下JSFiddle中，有一個屬性值可以更改以查看預期的結果v.s.所需的寬度。

預期結果（錯誤的屬性值）

div.container div.column { 
    width: 324px; 
} 

壞的結果（所需的屬性值）

div.container div.column { 
    width: 320px; 
} 

爲什麼我認爲320 px應該是我的兩個按鈕的含寬度：

320 px（列）= 155 px（按鈕）+ 10px（保證金）+ 155px（按鈕）

我敢肯定，問題是在我理解的一面，任何人都可以解釋爲什麼這正在進行？

Answer 1

<button> S按默認是內聯塊元件。這意味着空間（字面上的空間）影響它的間距。

您可以設置按鈕顯示塊浮到左邊來獲得類似的結果：

div.container button { 
    width: 155px; 
    height: 155px; 
    margin-right: 10px; 
    display:block; float:left; 
} 

還你需要清除浮動你的行中：

div.container div.row:after { 
    clear:both; 
    display:table; 
    content:''; 
} 

http://jsfiddle.net/4mWqL/2/

Answer 2

因爲兩個<button>標籤位於不同的行上，它會嘗試在兩個項目之間添加某種白色間距。如果你把它們放在一條線上就行了。

http://jsfiddle.net/4mWqL/1/

<div class="row"> 
    <button></button><button></button> 
</div> 

從Why does the browser renders a newline as space?

瀏覽器呈現時凝結多個空白字符（包括新行） 爲單個空格。唯一的例外是 元素或那些具有CSS屬性white-space：pre的元素。 （或者，在 XHTML中，xml：空間= 「保存」 屬性。）