CSSで隙間ができる原因をいくつか解決してみる

CSSで隙間ができる原因をいくつか解決してみる

CSSでHTMLページ全体やコンテンツのレイアウトを組んでデザインするとき、意図しない謎の隙間や余白ができてしまい悩むことがあります。

特にCSSコードの記述量が増えていくと原因を特定する範囲の広さを感じてしまい、意図しない隙間が余計に謎に思えてしまいます。

まだまだ初心者レベルのCSS知識しかないですが、過去から最近までの間で謎だと感じた隙間についての原因を今になってCSSで解決してみることにします。

 

ヘッダーの上にできる隙間

 

ヘッダーにサクサクっとサイトのタイトルやメニューをCSSでデザインして、HTMLファイルをブラウザで開いて見ると「ヘッダーの上にできる隙間」実はただの余白。

 

 

サクサクっと作成してしまったことでヘッダーの上にできる隙間だけでなく、ヘッダーの左右にも均等に隙間ができます。

CSSとHTMLの勉強を始めたばかりのときは、このヘッダーの上にできる隙間(実は余白)の原因が特定できなくて謎に思えてしまうことがあります。

 

隙間ができる原因はmarginの余白

 

ヘッダーの上に隙間ができる原因はCSSで「marginの余白」が適用されることが多いです。

CSSのmarginの余白が原因と言っても、CSSファイルに自分で記述したmarginではなく「ブラウザのデフォルト」で適用されるmarginの余白によってできる隙間が原因です。

 

 

例えばChromeブラウザのデフォルトCSSだと、ヘッダーの上下左右に8pxのマージンで余白が形成するので謎の隙間だと思ってしまいがちです

 

CSSでヘッダー上の余白を消して解決

 

ヘッダーの上にできる隙間の原因になるデフォルトCSSのmarginの余白は、CSSでbodyかHTMLページ全体にmarginの値で数値を0指定すればヘッダー上の余白を消すことができ解決できます。

 

 

 

 

意図しない隙間ができているHTMLページをブラウザの検証ツールを使用してbody要素の余白を確認すると、謎の隙間に余白が形成されているのが分かります。上の画像だと黄色い枠が余白です。

 

margin: 0;

 

Advertisement

 

このとき、まずは検証ツールのCSSでいいのでbodyセレクタにmargin: 0;を指定してヘッダーの上の隙間をなくすことができれば、CSSファイルのbodyセレクタにmargin: 0;を記述することでヘッダー上の謎の隙間が解決します。

またbodyセレクタにmargin: 0;ではなく、「*(アスタリスク)」で全称セレクタにしてmargin: 0;の指定でリセットCSSとしても解決できます。

 

div要素をCSSで横並びにした謎の隙間

 

次はdiv要素をCSSで横並びにしたときのことを事例として謎の隙間の原因と解決したことを紹介します。

 

 

複数のdiv要素をCSSのflexboxで上の画像のように横並びにしたときに、1番右だけ隙間が広い。

justify-content: space-around;で均等に配置するはずのflexboxのアイテムdivに謎の隙間が右にできて均等にならず。

 

divの隙間の原因はホントに謎だった

 

divの隙間の原因はホントに謎でした。

何かブラウザのデフォルトで効いてるCSSがあるのかと思いきや、そうでもない。

CSSで均等になるようにしてるのは間違いないので、先走って余計なpaddingやmarginの指定を加えるのも後でややこしくなりそうな予感しかしない。

Chromeの検証ツールでdivの隙間や継承されてるCSSを探っても謎の原因を特定できないまま。

けっきょく、このときのdivの隙間の原因はとんでもなく単純なことだったのと、検証ツールで隙間の謎は解決できたのです。

divの隙間の原因は空白の全角スペースが入り込んでたのが原因でした…

 

検証ツールで空白を見つけて解決

 

CSSでもHTMLでも検証ツールはChromeを使うことが多いのですが、たまにFirefoxの検証ツールを使います。

Chromeの検証ツールだと全角スペースの空白が発見できなかった。しかしFirefoxの検証ツールだと空白を見つけることができます。

 

 

上の画像はFirefoxの検証ツールです。divの隙間を作り出してしまっている原因そのものの名前の通り「空白」があると教えてくれます。

 

Advertisement

 

空白を見つけてdeleteで空白削除するだけのなんとも初歩的なミスからのdivの横並び右余白の解決。

このときを教訓にして、空白の全角スペースでの記述ミスだけで謎の余白との長期戦にならないように、使用するテキストエディタには全角スペースの空白を可視化する拡張機能を追加しました。

 

画像の下にできる謎の隙間

 

CSSで隙間ができる原因が分からなくて謎だったのは画像のときにもありました。

 

 

上記の画像はHTMLファイルでdiv要素にimgタグで画像を表示しているのですが、CSSで親要素のdivの背景色を適用したときに、画像の下にできる謎の隙間を発見。

body要素とdivの背景色を統一すれば一時的に解決できますが、それは後回しにしているだけなので、「違うだろうな」と思いつつ、まずは自力で努力してみようと余白関係のCSSでpaddingやmarginをいじっては見るものの解決せず。

自力では全く画像の下にできる謎の隙間が何のCSSで影響しているのか探せなかったので、ググって原因を探ることに。

 

原因はvertical-alignの値

 

画像の下にできる謎の隙間の原因は「vertical-alignの値」でした。

画像を表示するHTMLのimgタグに標準的なスタイルとしてvertical-align: baseline;が設定されてるようなのですね。ブラウザのデフォルトCSSが効いているのが原因ということになります。

Advertisement

vertical-align: baseline;

適用した要素のベースラインを親要素のベースラインに揃えるというCSS。今回で言えばimgタグの親要素divのベースラインに合わせていることが原因かと思っています。

 

またブラウザのデフォルトCSSが原因か…

 

CSSのvertical-alignの値を変えて解決

 

画像の下にできた隙間を消すために該当のimgタグにCSSでvertical-alignプロパティを記述。

そしてvertical-alignの値をbottomの指定に変えることで、画像下にできた謎の隙間は消えて解決できます。

 

vertical-align: bottom;

 

vertical-align: top;でも隙間は消えます。

display:block:でも隙間は消えました。

 

画像の下にできる謎の隙間の壁にぶち当たったのは実は最近のこと、画像に網かけしようとしたときに以下の画像のようになり「なんだ隙間っ!」と悩んだのをきっかけに画像下の隙間を解決する知識を吸収。

 

 

画像の余白はvertical-align: topのおかげで無事に解決です。

 

ul liのリスト左にできる隙間

 

CSSで隙間ができる原因をいくつか解決してみることの最後の1つは、ul liのリスト左にできる隙間です。

とても初歩的なリスト要素が形成する余白なのですが、意外とul liのリスト左にできる隙間にCSS初心者の頃は謎めくものです。解決すると「ときめく」

またリストは例えばflexboxなどで横並びにした場合では、ul liのリスト左にできる隙間があるのとないのとでは均等間隔が変わってしまいます。

 

 

上の画像のようにul liのリスト左にできる隙間がある分だけ左余白が広くなってしまうので、ulにはCSSで何の余白が適用されているか原因を理解しておいたほうが、スムーズにCSSでレイアウトが組めるんですね。

 

隙間ができる原因はpaddingの余白

 

ul liのリスト左に隙間ができる原因はpaddingの余白があるからです。しかもpadding-left

 

 

上の画像でいうと紫色の部分がul liのリスト左にできるpadding-leftの余白です。これもブラウザのデフォルトCSSが作り出してくれている余白です。

 

 

ブラウザがChromeの場合のul liのリスト左にできるpaddingはleftに40px。つまり隙間ができる原因としてpadding-left40pxの余白が、リストを使用したコンテンツの左余白をずらしてしまうことになるのですね。

ul liのリストを隙間なくぴったり左に寄せたいって思うときには、とても必要のない隙間です。

 

CSSのpadding-leftで解決

 

ul liのリスト左にできる隙間の原因となってしまうpadding-leftの余白を解決するには、こちらもCSSのpadding-leftで対抗して解決します。

左余白を消したいulタグにCSSのpadding-leftプロパティを記述して、padding-leftの値で数値を0pxにします。

 

padding-left: 0;

 

 

上の画像がul要素にCSSでpadding-left: 0px;を適用した後の画像です。中央に配置ができ無事に解決です。

または上下左右の数値をまとめて例えばpadding: 10px:のようにレイアウトに合わせて指定することでも謎の余白とさようならできます。

HTMLのリストはulとliまたはolとliで構成されますが、左にできる隙間を形成するのはulかolなので今回の例で言えばul要素にpadding-left: 0px;を適用します。

ul li{padding-left: 0px;}のようにしてしまうとブラウザのデフォルトCSSに対抗できませんことに注意です。

 

まとめ

 

CSSで隙間ができる原因をいくつか解決してみた今回の記事内容ですが、どれも初歩的なCSSの知識だと思っています。

けれどレイアウトが変わると余白が謎の隙間に思えてしまうことも。

物凄く単純なまとめ方にはなりますが、いろんなレイアウトから生まれる余白から経験を積んで再現してみるのが、謎の隙間と思ってしまうことを減らしていく近道なのだと今になって思う今回の記事でした。

CSSカテゴリの最新記事