【CSS/html】inputテキストボックスの余白調節方法

「テキストボックスの枠と文字とくっついて気持ち悪い！」

inputテキストボックスの余白調節方法を解説します。

↓隙間を消したい場合はこちら

【内側の余白】inputにpadding

要素の内側に余白を設定するにはpaddingを指定します。

<style>
.example{
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
</style>
<input type="text" value="inputテキストボックス" class="example">

「width:100%」を指定する場合は「box-sizing: border-box」も指定することで親要素からはみでなくなります。

ちなみに、カーソルをあてたとき、そのカーソルの範囲はpaddingの内側になります。

【外側の余白】inputにmargin

要素の外側に余白を設定するにはmarginを指定します。

<style>
.example2{
    margin: 20px;
}
</style>
<input type="text" value="inputテキストボックス" class="example2">

【枠があるときの外側の余白】親要素にpadding

inputに「width:100%」を指定しているときに左右のmarginを指定すると親要素からはみ出てしまいます。

そんなときは親要素にpaddingを指定して余白を調整しましょう。

<style>
.example3{
    border: 2px solid red;
    /*コレ*/padding: 20px;
}
.example3 input{
    width: 100%;
    box-sizing: border-box;
}
</style>
<div class="example3">
    <input type="text" value="inputテキストボックス">
</div>

【まとめ】テキストボックスの余白調節方法

• 【内側の余白】inputにpadding
• 【外側の余白】inputにmargin
• 【枠があるときの外側の余白】親要素にpadding

以上、テキストボックスの余白調節方法でした。