CSSパディングが要素のサイズを大きくするのはなぜですか？

divとtextareaにパディングを付けようとしています。これを行うと、要素内のコンテンツ領域が縮小されるのではなく、要素のサイズが大きくなります。私がやろうとしていることを達成する方法はありますか？

box-sizing:border-boxコンテナ要素に追加して、要素にパディングや境界線を追加したときに変化しない幅と高さを指定できるようにすることができます。

仕様についてはこちら（MDN）をご覧ください。

更新（回答するためにコピーされたコメント）

現在、MDN仕様border-boxによると、この値はすべての主要なブラウザでサポートされています

もちろん、一部のブラウザには適切なプレフィックスが必要です。つまり-webkit、ここで-mozはっきりとわかるように

CSS2の仕様によると、ボックスタイプの要素のレンダリングされた幅は、その幅、左/右の境界線、および左/右のパディングの合計に等しくなります（左/右の余白も機能します）。ボックスの幅が「100％」で、余白、境界線、パディングもある場合、それらはオブジェクトが占める幅に影響します（増加します）。

したがって、textareaの幅を100％にする必要がある場合は、width、margin-left / right、border-left / right、およびpadding-left / rightの合計が100％になるように値を割り当てます。

CSS3には、3つのボックスサイズモデルがあります。border-boxモデルを使用できます：

この要素で指定された幅と高さ（およびそれぞれの最小/最大プロパティ）によって、要素の境界ボックスが決まります。つまり、要素で指定されたパディングまたは境界線は、この指定された幅と高さの内側に配置および描画されます。コンテンツの幅と高さは、指定された「width」プロパティと「height」プロパティからそれぞれの辺の境界線とパディングの幅を差し引くことによって計算されます。

これはW3Cの部分の混乱であり、さまざまなブラウザは、独自のバージョンのボックスモデルでこの複雑さを増すだけでした。個人的には、どのブラウザーまたはCSS設定でうまくいくかを考える代わりに、ボックスのコンテンツをさらに別のDIVステートメントでラップし、次のようにパディングを使用する代わりに、そのDIVでマージンを使用します。

<div id="container" style="width: 300px; border: 10px solid red;">
   <div id="content" style="width: 250px; margin: 25px;">
      Some content
   </div>
</div>

これは固定サイズのコンテナでのみ機能しますが

それはブラウザとボックスモデルの実装に依存します。あなたが経験しているのは正しい行動です。

IEは伝統的にそれを間違えました：http：//en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

よりクロスブラウザソリューションの場合は、パディングが必要なタグを固定幅の別のタグにラップし、width：autoを指定することで、この動作を回避できます。このように、親の幅がxで、子にパディングを追加すると、子はxの全幅を継承し、親の幅や独自の幅を変更せずにパディングを正しく適用します。

divのデフォルトでは、ブラウザの互換性の問題を回避するので、その親コンテナの幅を取り、あなたが追加することができ、子のdivを指定してDIV、その後に必要なパディングを追加した子のdiv。

注意-パディングを追加すると増加するため、子divに幅を指定しないでください