CSS Textarea寬度錯誤也左右邊距

Question

我創造了一個小提琴來展示一些奇怪的東西。 我創建了一個DIV 200px寬度，在這個DIV中，我使用CSS插入了一個textarea。 因為它是一個盒子div，就像設計的其余部分一樣，我需要texarea剩下10px的邊距和10px的邊距，所以我編輯了邊距並將textarea的寬度設置為180，因為如果外部div為200px且剩余10px填充 - 10px填充權我還剩180px用於textarea寬度

這是我使用的代碼：

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>

好吧，看起來很糟糕這里是演示：

https://jsfiddle.net/f3d1t223/

我真的需要它也有1px的邊框。 任何想法為什么會這樣？

Answer 1

看看這一個。

 #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> 

根據你的代碼，你有填充和邊框大小也需要從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

在您的textarea上添加此代碼：

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

鏈接