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

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

経緯

HTMLは以下のように記述
<h2><span class="hoge">文字</span></h2>

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