サイト内に隙間！？CSSで隙間をなくす方法。

今回はCSSでサイトのコンテンツ同士、または上部・下部に空いてしまった隙間を埋める方法をご紹介します。

原因はいくつもあるので、まずは原因を解析してそれにあった対策ができるようにやって行きましょう！

まずは隙間画空いてしまう原因究明

原因究明にはGoogle Chromeがおすすめ

記事の冒頭でも言いましたが、隙間が空いている原因はたくさんあります。よくある原因としては

• marginの大きさの調整
• line-heightが無駄に大きく設定されている

があります。大きく分けて言うとこんなところでしょうか。そんな原因を究明するのに便利なのが、Google Chromeのデベロッパーツール、「要素を検証」です。

使い方ですが、まずはGoogle Chromeを起動しましょう。そして、自分のサイト上のどこか（どこでもいいので）で右クリックしましょう。

「要素を検証」を押して、サイトの隙間が空いてしまっている部分を探します。虫眼鏡ボタンを押して隙間までカーソルを持って行けばわかると思います。

おそらくその隙間の部分がオレンジ色で表示されていたらmarginが原因で、そう出なければline-heightが原因かと思います。

CSSで隙間を埋めよう

さて、原因がわかったところで、早速隙間をうめましょう。といっても簡単で、marginが原因ならそのmarginがかかっている要素のmarginを適切にしてあげれば済みますし、line-heightも小さくしてあげれば済みます。

特に多い原因の一つが、line-heightの大きさによるものです。

ただ、この原因による隙間は

と記述して挙げるだけで解決します。

どうしても解決しないとき

どうしても解決しないときは、position:relative;を利用して解決します。

例えば、上部のブロックと下部のブロックの間に隙間がある場合は、上部のブロックに

とし、下部のブロックには

と記述してあげれば解決します。ちなみに、ここに書いてある15pxはその隙間によって調整してください。

まとめ

CSSって本当に自分のおもった通りに行かないです。簡単な事でも多分line-heightが原因なんて気がつかない事が多いです。でも皆さんは今この記事を見ていただいているので、できるようになりました・・・よね？

また更新していきます！