HTML 文本区域边距答案

【问题标题】：HTML textarea marginHTML 文本区域边距
【发布时间】：2013-05-02 08:33:51
【问题描述】：

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

以JsFiddle 为例。如您所见，textarea 超出了右侧，而不是扩展到 10px 边距。有没有什么办法解决这一问题？我能想到的唯一方法是通过javascript手动调整大小，但必须有另一种方法。

【问题讨论】：

【解决方案1】：

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

HTML

<textarea>tyjyjyj</textarea>

CSS

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

为了更好地定位文本区域，您可以使用相关样式的元素将其包裹起来，例如 http://jsfiddle.net/tTnCd/4/

【讨论】：

【解决方案2】：

您不能在不使用父元素 100% 宽度的元素上使用 100% 宽度。
在这种情况下，您需要创建一个 100% 的最大宽度，然后尝试获取一个与您应用的边距完全对应的宽度值。

【讨论】：

【解决方案3】：

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

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

所以试试width:99%; margin:10px 0.5%; 之类的东西，它不会溢出父元素，前提是没有应用填充或边框等其他内容。

这是一个 fiddle 更新为使用百分比边距和宽度以不溢出。

编辑

我确实想在元素上添加任何边框或填充，当它具有 100% 宽度时也会使其溢出。一个例子是 Firefox 中 textarea 的默认样式，它给它一个 2px 的内嵌边框 + 宽度 + 边距。

【讨论】：