zukucode
主にWEB関連の情報を技術メモとして発信しています。

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>


関連記事