Html 100% 宽度减去边距和填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17631611/
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
100% width minus margin and padding
提问by Joakim Melin
I have been searching around but I can't find a solution to apply to my own problem.
我一直在四处寻找，但找不到适用于我自己问题的解决方案。
I am working on a mobile website and need the input boxes to be 100% width of the screen. But I have padding-left: 16pxand margin: 5pxthat makes the boxes go outside of the screen so I have to scroll to the right to see the end of the box. How do I make the boxes 100% minus the padding and margin?
我在一个移动网站上工作，需要输入框为屏幕的 100% 宽度。但是我有padding-left: 16px并且margin: 5px这使框超出了屏幕，所以我必须向右滚动才能看到框的末端。如何使框 100% 减去填充和边距？
To try it out: http://jsfiddle.net/wuSDh/
回答by Jonathan
You can use calc, modern browsers support it and IE9+ as well.
您可以使用calc，现代浏览器也支持它，IE9+ 也是如此。
div {
position: absolute;
height: 20px;
width: calc(50% - 10px);
padding: 5px;
}
回答by trex005
Block level elements naturally fill their parent, however if you specifically set width, you override this behavior, allowing margin and border to be added to the specified width. You specify 100% width on the body, thus giving an opportunity for it to overflow the document horizontally if there is an element rendered to it's right inner edge.
块级元素自然会填充它们的父元素，但是，如果您专门设置宽度，则会覆盖此行为，允许将边距和边框添加到指定的宽度。您在主体上指定 100% 宽度，因此如果有元素渲染到其右内边缘，则有机会水平溢出文档。
Example: http://jsfiddle.net/trex005/6earf674/
示例：http: //jsfiddle.net/trex005/6earf674/
The simple remedy to this is to stop declaring the body's width. If for some reason this is required, you can set the margin to 0; The same principle applies to the input, but it is a little more complicated. Inputs(text/password) and textareas, even when set to display as block will derive their widths from size and cols respectively. This can be overridden by specifying a width in CSS, however they also have user agent specified borders and margins so you have the overflow problem again. To fix this overflow, you need to set the input's display to block and it's box-sizing:border-box. Border box will calculate the borders and padding as part of the width.
对此的简单补救方法是停止声明主体的宽度。如果出于某种原因需要这样做，您可以将边距设置为 0；相同的原则适用于输入，但稍微复杂一些。输入（文本/密码）和文本区域，即使设置为显示为块也会分别从大小和列中获得它们的宽度。这可以通过在 CSS 中指定宽度来覆盖，但是它们也有用户代理指定的边框和边距，因此您再次遇到溢出问题。要修复此溢出，您需要将输入的显示设置为阻止并且它是 box-sizing:border-box。边框框将计算边框和填充作为宽度的一部分。
input[type="text"], input[type="password"] {
width: 100% !important;
margin: 5px !important;
box-sizing:border-box;
display:block;
}
Once you do that, you will notice there is extra spacing between the elements. This is because the display:block forces the line break, and the <br>tags that you added are redundant. Remove those, and you are in business!
一旦你这样做，你会注意到元素之间有额外的间距。这是因为 display:block 强制换行，而<br>你添加的标签是多余的。去掉那些，你就做生意了！
回答by user1721135
Looe the width:100%;then simply use as much padding as you like:
Looewidth:100%;然后只需使用尽可能多的填充：
#login_box {
padding:10px;
margin:50px;
}
Demohttp://jsfiddle.net/PFm3h/
Isolated effect:
隔离效果：
Demohttp://jsbin.com/ozazat/1/edit
演示http://jsbin.com/ozazat/1/edit
Lots of padding, lots of margin, no problem at all.
大量的填充，大量的边距，完全没有问题。
回答by Dagmar
I had this issue with 100% heights, and eventually it struck me that the answer is to use a padding on the element above the 100% height/width (i.e. the parent).
我遇到了 100% 高度的这个问题，最终让我震惊的是，答案是在 100% 高度/宽度（即父元素）上方的元素上使用填充。
<div style="padding: 1rem;">
<div style="height:100%; width:100%">
<p>The cat sat on the mat</p>
</div>
</div>
In short, the padding of the parent has the same effect as the margin of the child!
总之，parent的padding和child的margin效果是一样的！
回答by David Hellsing
Another solution is to position the INPUT's absolute and add left/right props:
另一种解决方案是定位 INPUT 的绝对值并添加左/右道具：
#login_box {
width: 100%;
position:relative;
}
input[type="text"], input[type="password"] {
position:absolute;
left:5px;
right: 5px
}
You would need to adjust margins etc, since they will be out of the relative layout flow. You can also add padding without trouble, since you didn't set a fixed width.
您需要调整边距等，因为它们将超出相对布局流程。您还可以轻松添加填充，因为您没有设置固定宽度。
This technique is widely supported in all browsers.
这种技术在所有浏览器中都得到广泛支持。
回答by David Hellsing
You can adjust your textbox width 100% to 95% .Now it's looking good
您可以将文本框宽度调整为 100% 到 95%。现在看起来不错
input[type="text"], input[type="password"] {
width: 95% !important;
margin: 5px !important;
}
See this : http://jsfiddle.net/wuSDh/
看到这个：http: //jsfiddle.net/wuSDh/
