带有填充和边距以及 100% 宽度的 HTML CSS 框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20377482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML CSS Box with padding and margin and 100% width?
提问by xercool
I have a box #boxwith width: 100%, height: 100%, padding: 5px, margin: 5px; border: 5px;
我有一个框#box，宽度：100%，高度：100%，内边距：5px，边距：5px；边框：5px；
I need in HTML5 layout correctly display that.
我需要在 HTML5 布局中正确显示。
Now i have that:
现在我有了：
But i need fit block in body area.
但我需要在身体区域安装块。
Code:
代码：
<!DOCTYPE html>
<style>
body,html {
width: 100%;
height: 100%;
margin: 0;
}
#box {
width: 100%;
height: 100%;
border: 5px solid red;
padding: 15px;
margin: 20px;
}
</style>
<body>
<div id="box">
Text will be here
</div>
</body>
回答by nkmol
The browser does excacly what you are telling him to do :) However I think you don't like the overflow it has.
浏览器完全按照您的要求执行 :) 但是我认为您不喜欢它的溢出。
What happens is that your #boxexpands because of your border and padding. You can make these properties inset, so it does not expand your element. You can do this with box-sizing:
发生的情况是#box您的边界和填充会导致您的扩展。您可以插入这些属性，因此它不会扩展您的元素。你可以这样做box-sizing：
#box {
width: 100%;
height: 100%;
border: 5px solid red;
padding: 15px;
/*margin: 20px;*/
box-sizing: border-box;
}
However you can not do the same with the margin, because the element is pushing itself from the body: it does what it supposes to do.
但是，您不能对 做同样的事情margin，因为该元素正在将自己从主体中推出：它会做它应该做的事情。
You can make a workaround by doing the same thing as above:
您可以通过执行与上述相同的操作来解决方法：
body
{
padding: 20px;
box-sizing: border-box;
}
You will use the padding on the body instead of the margin on the #box.
您将使用主体上的填充而不是#box.
jsFiddle
js小提琴
Update
更新
To prevent the double padding space, you should only apply it on the body element (or html, but i prefer the body as that is your visual element in the end).
为了防止双重填充空间，您应该只将它应用于 body 元素（或 html，但我更喜欢 body，因为它最终是您的视觉元素）。
回答by Sachin
According to w3c specs for Box Model
The rendered width of a box type element is equal to the sum of its width, left/right border and left/right padding.
框类型元素的渲染宽度等于其宽度、左/右边框和左/右填充的总和。
So that means the values of paddingand border-widthaffects the total width of the element. So here you are adding the 15pxof the padding along with 5pxof borders with 100% of actual width of the element.
使得装置的值padding和border-width影响元件的总宽度。因此，在这里您要添加15px填充的 和具有5px元素实际宽度 100% 的边框。
So overall it exceed the widow size that's why it comes with horizontal scroll.
所以总的来说它超过了寡妇大小，这就是它带有水平滚动的原因。
回答by keaukraine
You should use CSS box-sizingproperty:
您应该使用 CSSbox-sizing属性：
#box {
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0;
}
But please note that you will need to use zero marginfor this to work.
但请注意，您需要使用零margin才能使其工作。
There is a good explanatory article on how this works: http://css-tricks.com/box-sizing/
关于这是如何工作的，有一篇很好的解释性文章：http: //css-tricks.com/box-sizing/
With CSS3, you can replace border with inset border-shadowand margin with transparent border. This way you will have control of all of these parameters: padding, (fake) margin and border:
使用 CSS3，您可以用内嵌替换边框，border-shadow用透明边框替换边距。这样你就可以控制所有这些参数：填充、（假）边距和边框：
#box {
width: 100%;
height: 100%;
padding: 15px;
border:20px solid transparent;
box-sizing:border-box;
-webkit-box-shadow: inset 0px 0px 0px 5px #f00;
box-shadow: inset 0px 0px 0px 5px #f00;
-moz-box-sizing:border-box;
}
See a live fiddle here: http://jsfiddle.net/HXR3r/
在此处查看现场小提琴：http: //jsfiddle.net/HXR3r/
回答by Sarago?a
You can use css calc()
您可以使用 css calc()
#box {
border: 5px solid red;
padding: 15px;
margin: 20px;
width: calc(100% - 80px);
height: calc(100% - 80px);
}
回答by UID
You need to add Add box-sizing: border-box;property in your #boxAnd remove margin: 20px;
您需要box-sizing: border-box;在您的添加属性#box并删除margin: 20px;
Here is the updated CSS:
这是更新后的 CSS：
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#box {
width: 100%;
height: 100%;
border: 5px solid red;
padding: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
回答by NoobEditor
Your problem is, which you dint noticed, Assuming just for heights
你的问题是，你注意到了，假设只是为了heights
height:100%;
border: 5px solid red;
padding: 15px;
margin: 20px;
This makes height = 100% + border (2 x 5) + padding (2 x 15) + margin (2 x 20) = 100% + (10+30+40) px
这使得高度 = 100% + 边框 (2 x 5) + 填充 (2 x 15) + 边距 (2 x 20) = 100% + (10+30+40) px
which is more than 100%...hence no fit block in body area..Try reducing with height in percentage for better result!!
Similar is case for the widths!!
这不仅仅是100%......因此没有。fit block in body area.尝试减少百分比以获得更好的结果！
宽度的情况类似！！
