在響應式設計中對CSS填充進行故障排除

這個簡單的HTML5佈局旨在在左側有一個導航欄，並在其旁邊浮動了正文文本（使用百分比而不是像素來表示流暢，響應式設計 - 計算在CSS中的註釋中。）在響應式設計中對CSS填充進行故障排除

'頁' 中的元素的寬度DIV高達恰好等於100％。我想添加填充到某些元素，在這種情況下，導航。如果我刪除了所有的填充，它們可以正確地浮動，但是超過1或2個填充像素（不管它指定的單位是多少），並且它會中斷。我不明白爲什麼這是打破布局，因爲它是填充，所以肯定不應該改變塊的整體大小？

我錯過了什麼？。

更新 - 溶液： http://www.wturrell.co.uk/stackoverflow/20110615-02.html

（元顯示寬度=寬度加邊界加填充導航應該是標稱200個像素與右邊20像素填充總，所以對於流體設計，寬度=九百分之一百八十* 100％或20％，填充= 20/900 * 100或2.222％和正文保持九百分之七百* 100或77.777％。）

在CSS box model中，padding被添加到width獲取盒子的整體大小。在你的情況下，如果寬度百分比加起來達到100％，即使是1px也意味着內容溢出。

嘗試設置填充百分比，並在添加它們時考慮這一點，或者在邊緣留下1％或2％的緩衝區並以像素爲單位添加小填充。

2011-06-15 12:14:30

感謝（也@sandeep和@thirtydot） - 由於某種原因，我已經開始考慮反向並假設增加填充意味着內容寬度的減少..我編輯了這個問題以包含一個固定版本+新的計算。 – 2011-06-15 15:42:48

@williant;亞歷克斯是正確的padding & border添加width到一個元素。因此，根據padding調整width。

CSS：

#page nav { 
    clear: both; 
    display: inline; 
    float: left; 
    padding: 0 10% 0 0; 
    width: 12.2222%; 
}

2011-06-15 12:24:47 sandeep

首先，你需要添加的doctype觸發標準模式。如果沒有這個，你的頁面將使用Quirks Mode，這將導致特別是Internet Explorer中的惡意問題。

加爲你的第一行：

<!DOCTYPE html>

接下來，@Alex Ciminian的答案是正確的關於盒模型（padding不被認爲是width一部分）。您可以通過padding如數減少width，或：

你將它添加到任何元素，你想的padding被列入width的計算內：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

的BR對此屬性的owser支持很好：http://caniuse.com/css3-boxsizing - 無處不在，但IE6/7。

2011-06-15 12:30:40 thirtydot

酷，不知道盒子大小:)。 – 2011-06-15 13:17:57

您可以嘗試使用box-sizing: border-box;或設置max-width:100%和/或max-height:100%;。

如果您想嘗試並保持兼容性，則max-width和max-height css選項與舊版本的IE兼容。

編輯：

使用下面的代碼，使用跨瀏覽器盒大小：

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;

2013-01-13 00:23:38

回答