jquery - CSS Textarea 宽度错误，左右边距也错误

Question

我创建了一个 fiddle 来展示一些奇怪的东西。我创建了一个 200px 宽度的 DIV，并在这个 DIV 中使用 CSS 插入了一个文本区域。因为它是一个像设计的其余部分一样的盒子 div，所以我需要 texarea 具有 10px 左边距和 10px 右边距，所以我编辑了边距并将 textarea 的宽度设置为 180，因为如果外部 div 为 200px 且左内边距为 10px - 10px 右内边距我还剩下 180px 用于文本区域宽度

这是我使用的代码:

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>

根据您的代码，您还具有填充和边框大小，因此需要减少文本区域宽度的这些值。