htmlで謎の余白・隙間ができる時、なくすために試してみるCSS

htmlでもCSSでも指定していないのに、なぜだか2、3ピクセルの余白というか隙間が空いてしまったことってありませんか?
WEBデザインをしているとこの2ピクセル、、、いえ、わずか1ピクセルでも意図しない余白や隙間があったりすると気になってしまいます。

そんな時、その余白や隙間を消すために試していただきたいCSSをご紹介します。

1.line-height:0;


要素{
line-height:0;
}

Line-heightって文章の行間を調整するCSSですが、意図せぬ余白などに影響している場合があります。
余白が空いてしまっている要素そのものに指定したり、その親要素に指定してみてください。

2. font-size:0;


要素{
font-size:0;
}

これもline-heightと同様に、余白が空いてしまっている要素そのものに指定したり、その親要素に指定してみてください。

3. marginとpaddingを0

要素{
margin:0;
padding:0;
}

marginやpaddingは余白を指定するCSSなので、真っ先に調整してみたくなるCSSです。
意図せぬ余白の場合、0にすることで余白が消えることもありますので試してみてください。

補足:リセットCSS

補足ですが、リセットCSSというものがあります。
リセットCSSとは、ブラウザによるCSSの差異をなくすためのものです。

リセットCSSとは

ブラウザはIEやChromeなど複数存在しますが、それぞれ独自にデフォルトでCSSが指定されています。
独自に指定されたCSSなので、ブラウザによって表示に違いが出ます。その違いをなくそうとしたものが、リセットCSSです。

リセットCSSは、基本的にすべての値を0にしています。
0にしたところから、改めてWEBデザイナーやコーダーの思うように数値を指定していきます。

リセットCSSですべての要素の数値を0にすることで、ブラウザの仕様で元々あった余白などをなくすことができます。
「リセットCSS」で検索すると、テンプレート化したフリーのリセットCSSの配布サイトなど、いろいろ出てきますのでご興味のある方は検索してみてください。

*(アスタリスク)によるリセットCSS

本格的なサイトではなく、ちょっとテスト的にサイトを作る場合など下記のような簡易的なリセットCSSがよく使われます。

*{
margin:0;
padding:0;
}

*(アスタリスク)は、「すべての要素」ということです。 上記のCSSはすべての要素のmarginとpaddingを0に指定しました。
これによって、marginやpaddingのブラウザによる意図せぬ余白を削除できます。

ちょっとしたCSSのご紹介でしたが、ちょっとしたものでもハマってしまうと抜け出すのに大変な時ってありますよね。
なんだっこんな簡単なことで解決できるんだって。

この記事がお役に立てると幸いです。