こんにちは、ぱすたです!前までswiftというプログラミング言語を勉強していましたが、難しすぎて挫折しました泣
ぱすた
今はマークアップ言語のHTMLとCSSを勉強しています。始めて4ヶ月くらいですが、模写コーディングもできるようになってきました。ですがまだまだ分からないことだらけです。
今回は勉強してる中でつまづいた、「display: inline-block;で子要素の間に隙間ができる」の対処法を紹介します。
目次
display: inline-blockで余計な隙間ができる
リストを横並びにするときなど、display: inline-block;を使うと謎の隙間ができることがあります。これはソースコード上の改行が原因です。
デザイン的に隙間があっても問題ない時はいいのですが、隙間なく埋めたい時もあると思います。
隙間ができる↓
隙間を埋める↓
この隙間を埋めるための対処法を2つ紹介します。
対処法1 改行しない
通常リストタグなどでinline-blokを使う場合、コードを見やすくするためにliタグを改行して書くと思います↓
html
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
この改行が隙間のもとなので、改行せずに書くことで解決できます。
html
<ul>
<li>HOME</li><li>ABOUT</li><li>WORK</li><li>CONTACT</li>
</ul>
対処法2 font-sizeを0にする
親要素のfont-sizeを0にして、子要素に文字サイズを再指定することで、隙間を埋めることができます。
css
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>
font-sizeを0に: html
<form class="search-box">
<input class="search-text" type="text" name="search">
<input class="search-button" type="submit" value="検索">
</form>
css
.search-box {
font-size: 0;
}
.search-box > * {
font-size: 12px;
}
まとめ
今回はdisplay: inline-block;の隙間を埋める方法を2つ紹介しました。
他にもいくつか方法はありますが、よく使われるのが上記の方法です。
皆さんもinline-blockによる謎の隙間ができた時は、ぜひ参考にしてみてください!