How to put textarea in div with CSS - html

Question

I have a textarea in div.
This is my code:
#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>
It shows this:
But I want the distance between text area and div is 10.
So I set
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
but the right distance is too big.
How do I do to set the distance between text area and div?

Answer 1

Use margins and relative sizing instead of absolute positioning:
#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;
}
Often this can also be simplyfied:
#mdDiv {
height: 650px;
width: 300px;
padding: 10px;
background-color: blue;
}
#mdText {
width: 100%;
height: 100%;
padding: 0;
font-size: 18px;
}

Answer 2

Take out the absolute on the Textarea.
#mdText {
width: 100%;
margin: 10px;
font-size: 18px;
}
Or add padding to the parent
padding: 10px;

Answer 3

Alternative solution would be to disregard positioning and just use 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

Why are you used absolute position of div? If you don't need remove that form both div.
And using padding to main div or parent div to add spacing.
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%;
}
Here is example of 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;
}