記事内に広告が含まれています。

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

Jun 29, 2019

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

そんな時、その余白や隙間を消すために試していただきたい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にすることで余白が消えることもありますので試してみてください。

補足1：リセット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のブラウザによる意図せぬ余白を削除できます。

補足2：normalize.css（2020年2月追記）

normalize.cssもブラウザの差異をなくすためのCSSで、最近はリセットCSSよりもこちらを使用しているサイトをよく見かけます。
リセットCSSは全ての要素の値を0にしてしまいますが、normalize.cssは有用なデフォルトの値はそのままにしてあります。
ですのでリセットCSSよりも記述量が少なくてすむので、その分軽量となりますが、使用に際してはその中をしっかりと把握しておく必要があります。
「normalize.css」で検索すると、いろいろ出てきますのでご興味のある方は検索してみてください。

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

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