CSS Textarea宽度错误也左右边距

Question

I created a fiddle to show something strange. I created a DIV 200px width and inside this DIV i inserted a textarea using CSS. Because it is a box div like the rest of the design I need the texarea to have 10px margin left and 10px margin right, so I edited the margins and set the width of textarea to 180 because if outer div is 200px and 10px padding left - 10px padding right I have 180px left to be used in textarea width

Here is the code I used:

CSS

#messenger {
    margin-left:10px;   margin-right:10px;    margin-top:10px;    margin-bottom:10px;
    width:180px;      height:64px;  overflow:auto;
    background:#ffffff;    font-size:11px;   font-weight:normal;   color:#333333;
    border:1px solid #666666; 
    padding-left:5px;padding-right:5px;padding-top:2px;
}

#outer {width:200px;background:#cccccc;}

HTML

<div id="outer">
<textarea name="message" id="messenger" form="chat" maxlength="100" onFocus="if(this.value==this.defaultValue)this.value='';">
Your message here
</textarea>
</div>

well it is looking pretty bad here is the demo:

https://jsfiddle.net/f3d1t223/

I really need it to have borders 1px too. Any ideas why this is happening?

Answer 1

Check out this one.

 #messenger { margin:10px; width:168px; height:64px; overflow:auto; background:#ffffff; font-size:11px; font-weight:normal; color:#333333; border:1px solid #666666; padding-left:5px; padding-right:5px; padding-top:2px; } #outer {width:200px;background:#cccccc;} 

 <div id="outer"> <textarea name="message" id="messenger" form="chat" maxlength="100" onFocus="if(this.value==this.defaultValue)this.value='';"> Your message here </textarea> </div> 

acording to your code you have padding and border size also so need to reduce those values from the width of the textarea.

Answer 2

/*Add*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

https://jsfiddle.net/svansoeren/yaj10txk/13/

Answer 3

Add on your textarea this code:

/*Add*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
resize: vertical;

Link