填充拉伸div寬HTML5

我想保持我的div的寬度固定爲200px。但是，當我添加20px到填充，div被拉伸到240px寬度。這是HTML5的一些怪癖還是我做錯了什麼？填充拉伸div寬HTML5

這裏是我的HTML：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>My website</title> 
    <link rel="stylesheet" type="text/css" media="all" href="style.css" /> 
    </head> 
    <body> 
    <div id="wrapper"> 
    Hello world 
    </div> 
    </body> 
</html>

這裏是我的CSS：

#wrapper { 
    width: 200px; 
    padding: 20px; 
}

謝謝您的時間。

來源

2012-09-14 user18577

框模型指出，您應該減少您的項目寬度的任何填充和邊框添加到它的寬度。

所以在你的情況下，使你的寬度160px，你會很好。

此處瞭解詳情：

http://www.w3schools.com/css/css_boxmodel.asp

來源

2012-09-14 10:48:56

你的答案是正確的，但：http://w3fools.com/ – Nix

@Nix - 謝謝你提供的，非常有幫助。 –

邊境填充內容

寬度它的內容的屬性，以便填充將增加像素，以元素的總寬度

來源

2012-09-14 10:51:19 alabamaliquidsnake

這是一個盒子模型事情：this article有一些非常好的CSS3技巧來改變盒子模型。從本質上講，您可以將DIV定義修改爲：

#wrapper { 
    width: 200px; 
    padding: 20px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Example jsFiddle

來源

2012-09-14 11:06:48

填充拉伸div寬HTML5

回答

相關問題