CSSで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; 
} 

多くの場合、これはまたsimplyfiedすることができます。

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

Answer 2

あなたは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 3

は、テキストエリアに絶対的に取り出します。

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

それとも

padding: 10px; 

Answer 4

代替ソリューションはポジショニングを無視し、ちょうど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 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; 
}