`box-sizing`

Question

我似乎无法绕过这一个。

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

结果如下： enter image description here

这应该是这样的： enter image description here

这是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>

Answer 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;
}

Answer 2

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

没有大小调整
将文字区域的宽度从width: 100%更改为width: 795px;
看看http://codepen.io/gopkar/pen/csxKo
width = <div-width> - <padding-you-have-given>

Answer 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>

将填充添加到textarea会将元素推送到div之外

3 个答案:

`box-sizing`