display: inline-block; で子要素の間に隙間ができる対処法

今はマークアップ言語のHTMLとCSSを勉強しています。始めて4ヶ月くらいですが、模写コーディングもできるようになってきました。ですがまだまだ分からないことだらけです。

今回は勉強してる中でつまづいた、「display: inline-block;で子要素の間に隙間ができる」の対処法を紹介します。

display: inline-blockで余計な隙間ができる

リストを横並びにするときなど、display: inline-block;を使うと謎の隙間ができることがあります。これはソースコード上の改行が原因です。

デザイン的に隙間があっても問題ない時はいいのですが、隙間なく埋めたい時もあると思います。

この隙間を埋めるための対処法を2つ紹介します。

対処法１　改行しない

通常リストタグなどでinline-blokを使う場合、コードを見やすくするためにliタグを改行して書くと思います↓

 <ul>
    <li>HOME</li>
    <li>ABOUT</li>
    <li>WORK</li>
    <li>CONTACT</li>
  </ul>

この改行が隙間のもとなので、改行せずに書くことで解決できます。

<ul>
    <li>HOME</li><li>ABOUT</li><li>WORK</li><li>CONTACT</li>
 </ul>

対処法２　font-sizeを0にする

親要素のfont-sizeを0にして、子要素に文字サイズを再指定することで、隙間を埋めることができます。

ul {
  font-size: 0;
}
li {
  font-size: 16px;
}

検索フォーム

検索フォームを作るときのinputタグも初期値がinline-blockなので、テキストボックスと検索ボタンの間に隙間ができてしまいます。

解決方法は上記と同じです。

<form class="search-box">
    <input class="search-text" type="text" name="search"><input class="search-button" type="submit" value="検索">
 </form>

<form class="search-box">
<input class="search-text" type="text" name="search">
<input class="search-button" type="submit" value="検索">
</form>

.search-box {
font-size: 0;
}

.search-box > * {
font-size: 12px;
}

まとめ

今回はdisplay: inline-block;の隙間を埋める方法を2つ紹介しました。

他にもいくつか方法はありますが、よく使われるのが上記の方法です。

皆さんもinline-blockによる謎の隙間ができた時は、ぜひ参考にしてみてください！