ディベロッパーツールで全体をキャプチャするとフッター下に余白ができるのはなぜ？

Question

ディベロッパーツールで全体のスクリーンショットを取ると、フッター下に大きな余白ができます。
スクリーンショットにしなければ、余白は現れず、思い通りのデザインになっています。

通常時には余白が現れないため、検証できず…まだ制作途中ですが、気になってしまい進めません。

質問内容。

①これはディベロッパーツールの仕様でしょうか、それともコードに問題ありでしょうか。
②ディベロッパーツールで意図したデザインで表示されていても、スクリーンショットで問題がある場合は「問題あり」として扱うべきなのでしょうか？

教えていただけると嬉しいです。よろしくお願いいたします。

想定ブラウザについて

まだ理解できておりません。想定ブラウザと関係あるのかわかりませんが、ベンダーフレックスなども付けておりません。

Chromeのディベロッパーツールで選択できる機器のみ確認しています。私のPCはWindows10です。

余白について

説明不十分で申し訳ありませんでした。

.footer {
    position: sticky;
    background: #88B2BC;
    padding: 33px 29px 55px 73px;
    margin: 0 4em 4em 4em;/*この指定以上の余白が、全体スクリーンショット時のみ出現します*/
    z-index: 1000;
}

#　別のツールでは意図しない余白なくスクリーンショットがとれました。
他の方のPC上で同じ状況が再現されないので、chromeの仕様でないことがわかりました。
また、他のツールを使用したところ問題なくスクリーンショットが取れたので、今後は問題視しなくて良いということがわかりました。

ご回答いただきありがとうございました。

Comments

[m.ts10806]

想定のブラウザとバージョンを本文に追記願います

[choco10]

ご指摘ありがとうございます。追記いたしました。

[退会済みユーザー]

> ①これはディベロッパーツールの仕様でしょうか、それともコードに問題ありでしょうか。
別のスクリーンショットツール（もしくはextension）で試せばわかるかと

[choco10]

ありがとうございます。コメントいただき、参考書に沿ったサイト制作でも余白ができていたのを思い出しました。その他ツール調べて試してみます。

Answer 1

「余白」という表現ではどこが意図しない空間なのかがわかりません。

.footer {
	position: sticky;
	background: #88B2BC;
	padding: 33px 29px 55px 73px;
	/* margin: 0 4em 4em 4em; */
	margin: 0 4em 0 4em; /* こういうことでしょうか。 */
	z-index: 1000;
}

Comments

[kei344]

「編集 2020/02/23 17:53」部分確認しました。Windows7/8.1/10Home - Chrome 最新/64bit版で状況が再現しませんでした。

[choco10]

ご確認いただきありがとうございます。ということは、スクリーンショット時の余白はChromeの仕様ではなく、私のパソコンになにか問題があるということですよね…スクリーンショット時の余白は問題視しなくて良さそうですね（？）他回答を参考に別のツールFirefoxで全体キャプチャを試したところ、画面通りに保存されました。

[kei344]

もし気になるのであれば、ブラウザ拡張などの影響も考えられるので、ユーザーを切り替えてみてください。

【Chrome のマルチユーザー機能　複数アカウントを同時に使う】
https://yaruzou.net/browser-chrome-multi-account

[退会済みユーザー]

windows 10 pro (1909/64bit）＋ chrome の開発ツール同梱のは発生したのう

[choco10]

kei344さん　ユーザー切り替え、シークレットモードを試してみましたがやはり余白ができてしまいました。

asahina1979さん　確認していただきありがとうございます。相性の悪いものがあるということですね。