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ハックで消すのではなく、ソースまたはファイルの文字コードを修正して対応します。
