Html 向textarea添加填充将元素推到div之外_Html_Css_Textarea

Html 向textarea添加填充将元素推到div之外

html css

Html 向textarea添加填充将元素推到div之外,html,css,textarea,Html,Css,Textarea,我似乎不能把我的心思放在这件事上似乎是在我的文本区域中添加了一些填充（padding left:3px），然后用边框将其从我的div中推出来。在摘要框中添加一些文本填充将非常有用，因为这样用户会更容易阅读结果如下：它应该是这样的：以下是HTML/CSS标记： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .

我似乎不能把我的心思放在这件事上

似乎是在我的文本区域中添加了一些填充（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>


.fcontent\u文本{
字号：8.5pt；
文本对齐：右对齐；
颜色:rgb(11,63113);；
}
#fcontent_容器{
宽度：800px；
显示：块；
位置：相对位置；
保证金：5px；
}
#fcontent_包装器{
边框：1px实心rgb（128128）；
}
#总结{
宽度：100%；
保证金：0；
边界：0；
位置：相对位置；
左：3倍；
高度：50px；
}
总结

将

框大小：边框框添加到#summary
，以便您可以设置宽度：100%
和左右填充，而不会将内容溢出到容器中
边框框


宽度和高度属性包括填充和边框，但不包括边距。这是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;
}

使用盒子大小调整

您可以使用框大小：边框框

看看这个：
无需调整盒子大小

将文本区域的宽度从宽度：100%
更改为宽度：795px

看看

width=-
出于某种奇怪的原因，此解决方案似乎绕过了所有问题，并完美地工作：
<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>


扩大
你不能有宽度：100%
和左右填充-这就是你溢出容器边缘的原因。为了使用795px
，我必须从
中删除其他默认填充：填充：0px 0px 0px 3px。