More than 3 years have passed since last update.

CSSで見出しの文字を消したら謎の余白が出来た

Last updated at 2020-09-05Posted at 2020-08-28

まだコーディングに慣れておらず戸惑ってしまったので、備忘録として残します。

現象

HTMLは以下のように記述 `

文字

class「hoge」に囲まれた文字をCSSで消したところ、余白が出来てしまった。¹
他にh2を使用していた箇所あり。

検証

Chromeの検証ツールで確認。 spanを囲っているh2には何も余白をつけていなかったが、他にh2を使用していた箇所があり、CSSで要素そのものにmarginを設定していた。そのため、文字は消えたがmarginだけ残ってしまった。

結果

他の要素内のh2にclass名を振ったところ、余白は消えた。

学び

きちんとclass名を付けましょう！

余談

Q. h2をspanで囲えばええやん！ A. h2はブロックレベル要素、spanはインライン要素なので出来ません。

参考リンク

[インライン要素 - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements "インライン要素 - HTML: HyperText Markup Language | MDN")

幅と高さを1pxにし、clipで切り抜いた。(ShibajukuのPCコーディング講座より) ↩

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up