ホームへ

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

2022年07月25日

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

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

現象と原因

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

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

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSや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の隙間を消す方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ