html - 如何使用CSS将textarea放在div中

Question

我在 div 中有一个文本区域。
这是我的代码:

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