向 textarea 添加填充会将元素推到 div 之外答案

【问题标题】：Adding padding to a textarea pushes the element outside of the div向 textarea 添加填充会将元素推到 div 之外
【发布时间】：2013-10-16 20:23:20
【问题描述】：

我似乎无法把我的想法包裹在这个问题上。

似乎通过向我的文本区域添加一些填充（padding-left：3px），它会将它从我的带有边框的 div 中推出。在摘要框中为文本添加一些填充会很有用，因为它对用户来说更易读。

结果如下：

它应该是这样的：

这里是 HTML / CSS 标记：

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">

<style type="text/css">
.fcontent_text {
    font-size: 8.5pt;
    text-align: right;
    color: rgb(11,63,113);
}
#fcontent_container {
    width: 800px;
    display: block;
    position: relative;
    margin: 5px;
}
#fcontent_wrapper {
    border: 1px solid rgb(128,128,128);
}
#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
}
</style>


</head>

<body>
                <div id="fcontent_container">
                    <div class="fcontent_text">Summary</div>
                    <div id="fcontent_wrapper"><textarea class="normal" id="summary"></textarea></div>
                </div>
</body>

</html>

【问题讨论】：

你不能有 width: 100% 和左右填充 - 这就是你溢出容器边缘的原因。

标签： html css textarea

【解决方案1】：

将box-sizing: border-box 添加到#summary，这样您就可以同时设置width: 100% 和左右内边距，而不会使内容溢出到容器中。

box-sizing

border-box

宽度和高度属性包括内边距和边框，但不包括边距。这是文档处于 Quirks 模式时 Internet Explorer 使用的盒子模型。

为了跨浏览器的兼容性，请务必包含前缀：

#summary {
    width: 100%;
    margin: 0;
    border: 0;
    position: relative;
    padding-left: 3px;
    height: 50px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

【讨论】：

【解决方案2】：

使用 box-sizing
您可以使用box-sizing: border-box;
看看这个：http://codepen.io/gopkar/pen/HiEjn

没有盒子尺寸
将 textarea 的宽度从 width: 100% 更改为 width: 795px;
看看http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>

【讨论】：

为了使用795px，我必须从<textarea>中删除其他默认填充：padding: 0px 0px 0px 3px;。

【解决方案3】：

出于某种奇怪的原因，这个解决方案似乎绕过了一切并且完美地工作：

<div style="width: 800px">
<div style="text-align: right;">Expand</div>
    <div style="padding-right: 6px;">
        <textarea style="width: 100%; padding: 2px; margin: 0; border : solid 1px #999"></textarea>
    </div>
</div>

【讨论】：