どもです。
最近話題がないのでコーディングの話をば。

コーディングをしているとき、どうしても悩まされる「謎の隙間」。
これをできるだけ消していこうというコンセプトです。

①ページの上に隙間ができたとき

上に隙間ができる場合は、かなりの確率でmarginやpaddingが原因だと思います。

で、デフォルトで設定されている隙間を除去します。

これができているのに隙間ができる場合、というのも稀ですが存在します。
そのときにチェックして頂きたいのは、headの中に記述ミスがないかという点です。

特に全角空白が紛れ込んでいる場合、見ただけではわからないのでご注意を。

 

②ページの下に隙間ができたとき

ページの下に隙間ができたときのパターンは２通りあります。

ひとつは、コンテンツの高さがブラウザの高さに届かない場合。
有名な対処法としては、CSSでフッターを下に固定する方法があります。
ブラウザ差異等が発生し上手く行かなかった、という場合はjsを使うと良いでしょう。

そうではなく、スクロールバーが表示されているのに隙間ができる、という場合は、
「目に見えていない何か」がフッターに下にある、
またはフッターの下まで伸びていると思われます。

特に、フッターの作りが複雑な場合は、
気づかない内に透明な要素がはみ出ているかもしれません。
また、解析ツールなどが生成するimgタグ等が挟まっている可能性もあります。

③ページの横（右）に隙間ができたとき

この場合の原因も大体２通り。
ひとつは、「htmlとbody要素にwidthを設定し忘れている」ことです。
PCで見ても隙間はないのにスマホで見ると隙間ができる、なんて場合は高確率でこれです。
body,html{width:100%; min-widht:サイト幅+最低限の余白;}
を忘れずに設置しましょう。
余白を設置する場合はmargin:0 auto;の設定もお忘れなく。

もうひとつは、「コンテンツがはみ出ていること」です。
特にスマホサイト等の可変幅のサイトでは、imgだけでなく、inputやbuttonタグ等も
きちんとwidthが設定されているかチェックしましょう。
PCサイトの場合は、ページ全体のwidth、
コンテンツのwidthが矛盾していないかチェックです。

また、スマホサイトでCMSを導入する場合、
「折り返さない文字」にも注意しなければなりません。
ユーザーが記事の飾り付けとして（水平線代わりに）折り返さない文字を大量に使用し、
その結果、記事ページに大きな隙間ができてしまった、ということが過去、ありました。
その解決法としましては、overflow-x:hiddenをpやdivタグに設定しておくことです。

④横並べしたinline-block要素に隙間ができたとき

この原因は、HTML内で要素と要素の間に改行がされていることです。
例えば、

とした場合、隙間はできないのですが、

とした場合、改行が半角空白として認識され、隙間ができてしまいます。
SNSなどでこのような事例に遭遇した方はいるのではないでしょうか。
改行を認識しない、つぶやき機能などでは、
エディタで入力した改行は半角空白として認識されてしまいます。

この解決法は、勿論、要素を横並べにすることなのですが、
それをしてしまうとソースが見づらくなってしまって嫌だ、という場合もあります。

その場合、これらの親要素に

を設定。これで空白分をマイナスします。
が、この設定は子要素に反映されるので、
inline-block要素に文字を入力する場合は必ずletter-spacingを戻します。

もうひとつの方法として、ソース上の改行をコメントアウトするというのもあります。

ソースに余分なものを載せるか、CSSに余分なものを載せるか。この辺はお好みでお選びください。

最近ではfloatせずともdisplay:flexで横並びにすることができるので、隙間なく要素を並べたい場合は、根本的にそちらの方が良いかも？

⑤tableで隙間ができたとき

tableタグそのものに、

を入力することでtableの隙間がなくなります。

または、tableのCSSに

です。

⑥画像の下に隙間ができたとき

この原因は、行中の画像の位置がベースライン（アルファベットのoとかmとかの位置。qやgなどは下の部分がベースラインより出ている）になっているからです。

よって、画像の位置をベースラインではなく、行の下に合わせることができれば画像の下の隙間はなくなります。

これでおｋです。
詳しくはこちら：【WEBTECH☆WALKER】　画像の下にできる隙間

ちなみに、チェックボックスやラジオボタンの位置が妙に上になってしまったときも同じ原因と対処方です。
この場合は文字と位置を合わせたいため、bottomでは下過ぎるので、middleかsubあたりを使い分けます。

⑦Chromeでテキストエリアの下に隙間ができたとき

原理的には先ほどの⑥と同じ。テキストエリアも初期値がinline-blockなので、ベースラインの位置についてしまい、隙間が空きます。
ただし、テキストエリアについては何故かブラウザによって初期displayが異なります。例えばChromeではinline-blockですが、firefoxではinlineです。
そのため、ブラウザごとに隙間があったりなかったりします。

この解決法は先のvertical-align:bottom;でも良いのですが、その行に文字を入れたい稀有な状況でない限り、

の方が無難です。ブラウザ差異のあるtextareaのdisplayを設定しておいた方が細かな調整が楽。

 

これで大体、隙間の原因は網羅できたかな？
また見つけたら書いていこうと思います。