【CSS/html】inputを横に並べたときの余白,隙間を消す方法

「inputとinputの間にある隙間を消してピッタリくっつけたい！」

inputテキストボックスを横に並べたときの隙間を消す方法を解説します。

現象と原因

inputとinputを並べると下記のように隙間ができることがあります。

<input type="text" value="inputテキストボックス">
<input type="text" value="inputテキストボックス">

原因はテキストボックスがinline-blockであり、htmlソースで改行されているためです。

このどちらかを解決すると隙間が無くなります。

htmlをつなげる（改行をなくす）

htmlソースでinputとinputを一行で書くと隙間が無くなります。

<input type="text" value="inputテキストボックス"><input type="text" value="inputテキストボックス">

改行をコメントアウト

改行そのものをコメントアウトすると、2行にしても隙間が無くなります。

<input type="text" value="inputテキストボックス"><!--
--><input type="text" value="inputテキストボックス">

display:flexで並べる

親要素に「display:flex」を指定すると隙間が無くなります。

<style>
.example{
    display: flex;
}
</style>
<div class="example">
    <input type="text" value="inputテキストボックス">
    <input type="text" value="inputテキストボックス">
</div>

テキストボックスをinline-blockでなくするために「display:block」を指定しても隙間は無くなるのですが、肝心の横並びができなくなります。

そこで親要素に「display:flex」を指定します。これで隙間を消すことと横並びが両立します。

マイナスmarginで詰める

マイナスmarginで隙間分の距離を詰めるやり方です。

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

ただし、ブラウザやCSSによって隙間の大きさが変わる可能性があるため、指定する数値は要注意です。

【まとめ】inputとinputの隙間を消す方法

• htmlをつなげる（改行をなくす）
• 改行をコメントアウト
• display:flexで並べる
• マイナスmarginで詰める

以上、inputとinputの隙間を消す方法でした。