input이나 textarea의 크기가 잘 맞지 않을 때

아무리 width를 조정하고 padding, margin, border까지 똑같이 줘도 제대로 사이즈가 맞지 않을 때는,

box-sizing:border-box; 를 넣어줘 본다. <div style=“box-sizing:border-box;width:100px;border:1px solid gray;height:20px;float:left;display:block;">test</div> <input type=“text” style=“box-sizing:border-box;width:100px;height:20px;float:left;display:block;” value=“test”/> <textarea style=“box-sizing:border-box;width:100px;height:20px;float:left;display:block;">test</textarea>

자세한 것은 다음 링크참조

chrome같은 경우엔 기본적으로 input[type=“text”],input[type=“button”]같은 것들이 box-sizing:border-box로 되어 있는 듯 하다.

css3 속성이므로 ie에서는 제대로 안 된다.