CSS テキストボックスの余白を設定する
CSS
でテキストボックスの余白を設定する方法を紹介します。
以下のように、余白を設定していないテキストボックスは枠線とテキストの位置が非常に近くなってしまいます。
<div>
<input type="text" value="余白なし">
</div>
余白を設定するには以下のように、テキストボックスの要素に対してpadding: 余白サイズ;
の形式で指定します。
<div>
<input type="text" value="余白なし">
</div>
<div>
<input type="text" style="padding: 5px;" value="余白5px">
</div>
<div>
<input type="text" style="padding: 10px;" value="余白10px">
</div>