WEB制作会社に入社して6か月のド新人HTMLコーダーです。
最近はCSSや開発者ツールにも少しは慣れてきて、問題があっても自分で解決できるようになってきました。
しかし、最近「謎の余白」でハマった事件があり、ご紹介したいと思います。
フッターの下に余白がある！
問題のWEBページは上記画像のように、フッターがあり、フッター内にページトップへ戻るためのリンクがありました。一般的なWEBページですね。
先輩からのレビュー指摘で「フッターの下に余白がある」と言われて気づきました。
私はてっきり、この余白はブラウザ固有のものというか、詰めれるスペースではないと思っていましたが、そうではないようです。
どうせmarginかpaddingでしょ！と、余白の原因を調べるが……
余白といえば、marginかpadding。ということで開発者ツールで要素を調べますが、どの要素に焦点を当てても、marginやpaddingの色になりません。
じゃあ何かの要素にheightが入っている？と考え調べますが、それも違う。
この時点で、結構困りました。しかし諦めません。
サンプル画像はシンプルに作っていますが、実際のWEBページはフッター内に住所やサイトマップなど要素が多くあったため、まずは原因となっている要素の特定をする必要があると考えました。
地道ですが、開発者ツールでフッター内の要素をひとつずつ「Delete element」していき、謎の余白が一緒に消えたら、その要素が犯人です。
「謎の余白」の正体
「謎の余白」の正体は、ページトップへ戻るの画像でした。
このimgタグを消すと、一緒に謎の余白も消えます。
調べてみるとこんな記事が。
[CSS]ページのレイアウトで、意図せずできてしまった隙間の原因とその解決方法のまとめ
インライン要素は、その下にほんの少しだけスペースを確保します。この現象は親の要素が「display: block;」でブロック要素の時に見られます。
解決にはいくつかの方法があります。
- 親要素のfont-size or line-heightを「0」にするミニサイズのリセット用のCSSを適用する。
- 中に配置されるインライン要素に「vertical-align: middle;」を適用する。※「vertical-align: bottom;」でも機能します。
- 中に配置される要素に「display: block;」を適用する。
今回は親要素に対してfont-size: 0;を適用して解決しました。line-height: 0;だとなぜか解決せず。
まとめ
画像にfont-sizeの指定が効くというのは驚きでした。画像もテキストも、インライン要素という括りでは同じ扱いという理解で良いのかな。
先輩曰く、「marginとpaddingじゃない場合は、とりあえずfont-sizeとline-heightを疑え！」とのこと。
勉強になりました。
