要素の幅を作る方法：100％マイナスパディング？

HTML入力があります。

入力にはpadding: 5px 10px;、親divの幅（流体）の100％にする必要があります。

しかし、使用するwidth: 100%;と、入力は100% + 20pxどうすればこれを回避できますか？

例

box-sizing: border-box それを修正するための迅速で簡単な方法です：

これは、すべての最新のブラウザ、およびIE8 +で機能します。

ここにデモがあります：http : //jsfiddle.net/thirtydot/QkmSk/301/

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

ブラウザのプレフィックス付きバージョン（-webkit-box-sizingなど）は、最新のブラウザでは必要ありません。

これがbox-sizingCSSにある理由です。

あなたの例を編集しましたが、今ではSafari、Chrome、Firefox、Operaで動作します。チェックしてみてください：http : //jsfiddle.net/mathias/Bupr3/ 追加したのはこれだけです：

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

残念ながら、IE7などの古いブラウザはこれをサポートしていません。古いIEで機能するソリューションを探している場合は、他の回答を確認してください。

パーセンテージでもパディングを使用し、幅から削除します。

パディング：5％;
幅：90％;

あなたは使用せずにそれを行うことができますbox-sizingし、明確ではないようなソリューションをwidth~=99%。

jsFiddleのデモ：

• 入力を保持しpadding、border
• 負の水平方向の入力に追加margin= border-width+horizontal padding
• 前のステップpaddingと等しい水平方向の入力のラッパーに追加しますmargin

HTMLマークアップ：

<div class="input_wrap">
    <input type="text" />
</div>

CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

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未満になるように、両側が引き伸ばされます。

いくつかの位置決めトリックを試すことができます。position: relative高さを固定してdivに入力を置き、次に入力position: absolute; left: 0; right: 0;にと任意のパディングを付けることができます。

実例

これはcodeontrack.comからの推奨事項であり、優れたソリューションの例があります。

divの幅を100％に設定する代わりに、自動に<div>設定し、必ずがdisplay：block（のデフォルト<div>）に設定されていることを確認してください。

入力ボックスのパディングをラッパー要素に移動します。

<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％; 幅：自動; （AUTO）MATICALLYは、パディングを含むラッピングdivの指定されたと正確に一致するように幅を計算します。幅100％は幅を拡張し、パディングを追加します。

それをコンテナで包むのはどうですか？コンテナは、次のようなスタイルを持っています。

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

これを試して：

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

私にとって、を使用してmargin:15px;padding:10px 0 15px 23px;width:100%、結果はこれでした：

私の解決策はのwidth:auto代わりに使用することでしたwidth:100%。私の新しいコードは：

margin:15px;padding:10px 0 15px 23px;width:auto。次に、要素を適切に配置します。

同じ問題がありました。次のように修正します。

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

あなたはこれを行うことができます：

width: auto;
padding: 20px;