Webサイトのコーディングで、ページ最下部（フッターの下）に数px〜1行分程度の「謎の余白（スクロールできる空白領域）」が発生することがあります。
html / body の margin / padding は 0、フッターの margin-bottom も 0。DevTools で見ても原因が掴みにくい。
このタイプの余白は、CSSではなく 「テキストノード（不可視文字）」が原因になっていることがあります。
本記事では、切り分け方法と、実務で踏みやすい2パターン（A：タグ間の不可視文字、B：BOM）を整理します。
1. 現象と切り分け
次の条件に当てはまるなら、本文のパターンA/Bが疑わしいです。
html,bodyのmargin,paddingは0- フッター要素（
.l-footer等）のmargin-bottomも0 outlineで全要素を囲っても、余白が「要素の枠としては捉えづらい」領域に見えるoverflow: hidden;を付けても症状が変わらないことがある
診断方法：「CSSの余白」か「文字の高さ」かを判別する
一時的に body に以下を当てます。
body {
font-size: 0;
}これで 余白が消える場合、原因は「不可視文字（テキストノード）」である可能性が高いです。
空白や改行など“見えない文字”でも、ブラウザは文字として扱うため、通常は font-size と line-height を持ちます。
この「行の高さ」が、結果としてページ最下部の余白として現れます。
※ body { font-size: 0; } はあくまで診断・対症療法であり、本番の恒久対応としては非推奨です（本文後半で理由を説明します）。
2. パターンA：HTMLタグ間／HTML末尾に混入した不可視テキストノード
原因
</footer> の直後や </body> の直前などに、以下のような不可視文字が混入しているケースです。
- 全角スペース
- 改行
- ゼロ幅文字
- コピペ由来の制御文字
例（見えにくい全角スペースが混ざっている）：
</footer>
</body>この不可視文字が DOM 上ではテキストノードとして存在し、条件によって line-box が生成されて高さを持ち、余白のように見えます。
解決策
HTML末尾（</body> 直前）やフッター閉じタグ周辺にある不要な空白・改行・不可視文字を削除します。
ポイントは「タグを詰めて </footer></body> にする」ことではなく、不要な不可視文字を除去することです。
（可読性の観点でタグを同一行に詰めるのは推奨しません）
3. パターンB：テンプレートの文字コードが UTF-8 with BOM（BOM問題）
原因
エディタ上では空白が一切ないのに余白が出る場合、疑うべきは BOM（Byte Order Mark）です。
特に以下のような構成で踏みやすいです。
- Nunjucks（
.njk） - EJS
- PHPテンプレート
- 共通パーツ（ヘッダー／フッター）を
includeしている
include しているテンプレートが UTF-8 with BOM で保存されていると、ファイル先頭の BOM が不可視文字（U+FEFF 相当）としてHTMLに混入し、
ブラウザによってはテキストノードとして扱われ、line-box が生成されて余白になります。
（実例：src/templates/partials/_global-menu.njk と src/templates/partials/footer.njk が UTF-8 with BOM だったため、BOMなしへ変換して解決）
解決策（VS Code）
- 該当テンプレートファイルを開く
- 右下のエンコード表示（例：
UTF-8 with BOM）をクリック - 「UTF-8」(BOMなし) を選択して保存し直す
Git管理下では差分が分かりづらい場合があるため、確実に「BOMなし」で上書き保存します。
4. なぜ body { font-size: 0; } は恒久対策として非推奨か
font-size: 0 は line-box の高さをゼロ化するため、症状が消えることがあります。
ただし次の副作用があります。
- body直下のテキストが意図せず消える
- 子要素側で
font-sizeを戻し忘れると表示崩れの原因になる - 原因（不可視文字混入）を温存したままになり、別の場所で再発し得る
したがって、基本方針は HTML（またはテンプレートのエンコーディング）を修正して根本解決です。
5. まとめ
フッター下の余白が font-size: 0 で消えるなら、原因は「そこに見えない文字がある」可能性が高いです。
- パターンA：HTML末尾やタグ間の不可視テキストノード（全角スペース／改行／ゼロ幅文字など）
- パターンB：テンプレートが UTF-8 with BOM（BOMが不可視文字として混入）
CSSハックで無理やり消すのではなく、ソースまたはファイルの文字コードを修正して根本対応しましょう。