最近では、ブラウザの互換モードを使わないように明示的に記載することが推奨されている <!DOCTYPE html> のタグ。
でもそれを入れると、これまでブラウザの互換モードが働かなくなるのでレイアウトが崩れることもあります。
今回は、とても細かいのですが、<!DOCTYPE html> のタグを入れると、ページの下に微妙なスペースができたので、これを消す方法です。
body要素の範囲内だったので、まずはいろいろ試します。
スタイルシートのbody の所に、
body
{
display: flex;
}
を追加すると、隙間が消えました。
ただ、body要素は影響範囲が広いので、display を変更すると、CSSの設計によっては他のデザインに影響が出てくるところがあります。というか、ほぼ影響します。
例えば、よく使われる<main> や <footer> の中で指定している display: position: padding: などを変更する必要、または明示的に指定する必要が生じる場合があります。
Chromeの検証機能などを用いて、実際のレンダリング結果を見ながら変更していくほうが速いです。
以上です。