如何制作元素宽度：100％减去填充？

你可以这样做：

width: auto;
padding: 20px;

对我来说，使用margin:15px;padding:10px 0 15px 23px;width:100%，结果是这样的：

对我来说，解决方案是使用width:auto而不是width:100%。我的新代码是：

margin:15px;padding:10px 0 15px 23px;width:auto。然后元素正确对齐：

将输入框的填充移动到包装器元素。

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

在此处查看示例：http : //jsfiddle.net/L7wYD/1/

只需了解width：auto;之间的区别即可；宽度：100％宽度：自动; 将（自动）自动计算宽度，以适合包含padding的包装div给出的精确值。宽度100％会扩展宽度并添加填充。

将其包装在容器中怎么样？容器应具有以下样式：

{
    width:100%;
    border: 10px solid transparent;
}

尝试这个：

width: 100%;
box-sizing: border-box;

您可以尝试一些定位技巧。您可以将输入放在具有position: relative和固定高度的div中，然后在输入上包含position: absolute; left: 0; right: 0;以及所需的任何填充。

现场例子

这是codeontrack.com的建议，其中包含良好的解决方案示例：

而不是将div的宽度设置为100％，而是将其设置为auto，并确保将<div>设置为display：block（默认为<div>）。

box-sizing: border-box 是一种快速，轻松的解决方法：

这将适用于所有现代浏览器和IE8 +。

这是一个演示：http : //jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

-webkit-box-sizing现代浏览器不需要浏览器前缀版本（，等）。

使用CSS calc（）

超级简单又给力。

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

如此处所示：Div宽度100％减去固定像素
数（通过webvitaly）（https://stackoverflow.com/users/713523/webvitaly）
原始来源：http : //web-profile.com.ua/css/dev/css -width-100prc-minus-100px /

只是将其复制到这里，因为我在另一个线程中几乎错过了它。

假设我在一个15px填充的容器中，这就是我一直用于内部的内容：

width:auto;
right:15px;
left:15px;

这样会将内部部分拉伸到任何宽度，但应小于两侧的15px。

This is why we have box-sizing in CSS.

I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/ All I added was this:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.

也使用百分比填充，并从宽度中删除：

填充：5％;
宽度：90％;