填充/邊距寬度設置？

Question

基本上我有一個div，我想在100％的寬度。但是，我也希望它有一些填充。但是當我添加填充時，寬度被添加到它，這意味着我的div現在脫離屏幕並且有一個水平滾動條。

通常情況下，我只是讓div的百分比較低（如95％或90％）。

我想知道是否有更優雅的方法來處理這種情況？

Answer 1

嘗試填充設置爲5％和寬度的90％（100-5x2）

Answer 2

看一看box-sizing。

.example { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

默認情況下，元素的寬度是根據其內容框來計算的。所以應用的填充被添加到寬度。如果將框模型更改爲border-box，則寬度中將包含填充。爲了兼容看看caniuse.com

Answer 3

有四個重要的事情涉及到CSS盒模型。 ⅰ）保證金 II）邊界 ⅲ）填充 ⅳ）內容

當我們設定寬度那麼我們基本上設定內容的寬度，以便增加填補裝置寬度的整體增加。

請通過以下資源，你會知道一切。

http://www.w3.org/TR/CSS2/box.html

http://css-tricks.com/the-css-box-model/

你可以使用％或者即使你計算像素寬度是否正確，您還設立邊界，甚至要設置頁邊距處理這種情況。

element{ 
    width: 96%; 
    padding: 0 2%; 
} 

Answer 4

缺省情況下一個div是width: auto其中（假設正常定位，顯示和缺乏浮動的）將導致它來填充它的容器（佔空間，填充和邊框）。

只需將它留在width: auto而不是設置顯式寬度或百分比寬度。