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;

Link