填充值也起着一定的作用。使用你发布的风格:

textarea {
  border:1px solid #999999;
  width:100%;
  margin:5px 0;
  padding:3px;
}

宽度已经填满，左、右填充为3px。所以会有溢出。

如果你改变你的风格如下:

textarea
{
  border:1px solid #999999;
  width:98%;
  margin:5px 0;
  padding: 3px 1%;
}

我的样式现在所做的是它的宽度为98%剩下的2%完成100%这就是为什么我给左填充1%右填充1%的原因。这样，溢出的问题就可以解决了

对于使用Bootstrap的人，textarea。表单控制也会导致文本区域大小问题。Chrome和Firefox似乎使用不同的高度与以下引导CSS:

textarea.form-conrtol{
    height:auto;
}

那么负边际呢?

textarea {
    border:1px solid #999999;
    width:100%;
    margin:5px -4px; /* 4px = border+padding on one side */
    padding:3px;
}

让我们考虑一下我们想要实现的最终输出:一个带有边框和填充的填充文本区域，其特征是当单击时，它们将焦点传递到我们的文本区域，以及块元素典型的自动100%宽度的优势。

在我看来，最好的方法是尽可能使用底层解决方案，以达到最大的浏览器支持。 在这种情况下，唯一的HTML可以很好地工作，避免使用Javascript(无论如何我们都喜欢)。

LABEL标签之所以出现在我们的帮助中，是因为它具有这样的行为，并且允许包含它必须指向的输入元素。 它的默认样式是内联元素之一，因此，给标签一个块显示样式，我们可以利用自己的自动100%宽度，包括填充和边框，而内部文本区域没有边框，没有填充和100%宽度。

看看W3C的其他优点，我们可能会注意到:

不需要“for”属性:当LABEL标签包含目标输入时，它会在单击时自动聚焦子输入; 如果已经为文本区域设计了外部标签，则不会发生冲突，因为给定的输入可能有一个或多个标签。

有关更详细的信息，请参阅W3C细节。

简单的例子:

.container { 宽度:400 px; 边界:3 px 固体# f7c; ｝ .textareaContainer { 显示:块; 边框:3px实心38c; 填充:10 px; ｝ textarea { 宽度:100%; 保证金:0; 填充:0; 边框宽度:0; ｝ 身体< > < div class = "容器" > 我是容器 <标签类= " textareaContainer " > <textarea >我是一个带样式边框的填充文本区域 < / >标签 < / div > < /身体>

. textareacontainer元素的padding和border就是我们要赋予textarea的padding和border。试着编辑它们，按照你想要的样式。 我为. textareacontainer元素提供了大而可见的填充和边框，以让您在单击时看到它们的行为。

如果你像这样填充和偏移:

textarea
{
    border:1px solid #999999;
    width:100%;
    padding: 7px 0 7px 7px; 
    position:relative; left:-8px; /* 1px border, too */
}

textarea的右侧与容器的右侧完美对齐，textarea内的文本与容器中的正文完美对齐……和左侧的textarea“突出”一点。它有时更漂亮。

如果你不太介意填充的宽度，这个解决方案实际上会保持填充的百分比。

textarea
{
    border:1px solid #999999;
    width:98%;
    margin:5px 0;
    padding:1%;
}

不完美，但你会得到一些填充和宽度加起来是100%，所以这一切都很好