如何使用CSS将textarea放入div中

Question

我在div中有一个textarea 这是我的代码：

#mdDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 650px;
    width: 300px;
    background-color: blue;
}

#mdText {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    font-size: 18px;
}

<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

它表明了这一点：

但是我希望文本区域和div之间的距离是10 所以我设置了

top: 10px;
bottom: 10px;
left: 10px;
right: 10px;

但正确的距离太大了 如何设置文本区域和div之间的距离？

Answer 1

使用边距和相对大小而不是绝对定位：

#mdDiv {
    height: 650px;
    width: 300px;
    padding: 0;
    background-color: blue;
}
#mdText {
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    margin: 10px;
    padding: 0;
    font-size: 18px;
}

通常这也可以简化：

#mdDiv {
    height: 650px;
    width: 300px;
    padding: 10px;
    background-color: blue;
}
#mdText {
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 18px;
}

Answer 2

取出Textarea的绝对值。

#mdText {
    width: 100%;
    margin: 10px;
    font-size: 18px;
}

或者向父母添加填充

padding: 10px;

Answer 3

替代解决方案是忽视定位，只使用padding。

#mdDiv {
    height: 650px;
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    background-color: #00F;
}

#mdText {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

Answer 4

为什么你使用div的绝对位置？如果您不需要删除这两个div。

使用填充到主div或父div来添加间距。

HTML：

<div id="mdDiv" >
    <textarea id="mdText">Hello World</textarea>
</div>

CSS：

#mdDiv {       
    height: 650px;
    width: 300px;
    background-color: blue;
    padding:10px;
}

#mdText {
  font-size: 18px;
    width:297px;
    height:100%;
}

以下是jsfiddle的示例：https://jsfiddle.net/r49fkLz0/

Answer 5

CSS

 #mdDiv {
position: absolute;
top: 0px;
left: 0px;
height: 650px;
width: 245px;
background-color: blue;
}

#mdText {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
font-size: 18px;
}