CSSでinputとtextareaがはみ出てしまう

Question

inputとtextareaがdivをはみ出るのはなぜですか？
どうやったらdivのpaddingの中におさまりますか？

<div>							
  <textarea></textarea>
  <fieldset>
    <p>
      <input type="text">
    </p>
  </fieldset>
</div>

div{
background: gray;
padding: 10px;
}
input, textarea {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 2px;
    padding: 10px;
    border: 1px solid black;
}
fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

Answer 1

box-sizing を指定してみてください。

【CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary】
http://phiary.me/css3-box-sizing/

【box-sizing - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

Comments

[irukairuka]

便利ですね！どうもありがとうございました。