Question

当我向宽度为100％的HTML <textarea>添加边距时，边距会正确应用于左侧，但整个文本框会向右移动并延伸到父容器。

请参阅此JsFiddle作为示例。正如您所看到的，textarea延伸到右侧而不是扩展到10px边距。有没有什么办法解决这一问题？我能想到的唯一方法是使用javascript手动调整大小，但必须有另一种方式。

Answer 1

您不能在不使用100％父级宽度的元素上使用100％宽度在这种情况下，您需要创建100％的最大宽度，然后尝试获得与您正在应用的边距相对应的宽度值。

Answer 2

当您设置width:100%时，它会被设置为父级的100％，但是当您添加额外的10px边距时，它现在完全大于父级。

我已开始使用超过任何固定边距或宽度的百分比，因此不会发生这种情况。

所以尝试像width:99%; margin:10px 0.5%;这样的东西，它不会溢出父元素，假设没有其他东西像填充或边框一样。

这是fiddle更新后使用百分比边距和宽度来表示不溢出。

修改

我确实希望在元素宽度为100％时添加任何边框或填充，也会使其溢出。一个例子是Firefox中textarea的默认样式，它给它一个2px的插入边框+宽度+边距。

Answer 3

这是你想要的效果吗？在这里，我将位置设置为绝对位置，并从每个边缘给出边距。

<强> HTML

<textarea>tyjyjyj</textarea>

<强> CSS

textarea {    
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
}

为了更好地定位textarea，您可以使用相对样式元素包装它，如http://jsfiddle.net/tTnCd/4/