填充/边距宽度设置？

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而不是设置显式宽度或百分比宽度。