css height=100%に設定すると上に余白ができる

###css height=100%に設定すると上に余白ができる
トップ画面で画面全体に背景画像を表示させたいのですが、上部に余白ができてしまいます。
初歩的な質問かもしれませんが、解決法を教えていただきたいです。

HTML
1<body>
2<section class="top" id="top">
3	<h1 class="catchcopy">CATCH COPY</h1>
4</section>
5<footer class="footer">	
6</footer>
7</body>
8</html>

css
1@charset "UTF-8";
2/* CSS Document */
3
4html {
5	font-size:  62.5%;
6	height: 100%;
7}
8* {
9	margin: 0;
10	padding: 0;
11}
12
13*, *::before, *::after {
14	box-sizing: border-box;
15}
16
17body {
18	color: #fff;
19	font-size: 1.4rem;
20	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
21	height: 100%;
22	margin: 0;
23}
24
25.top, .top::after {
26	width: 100%;
27	height: 100%;
28	background: url(../img/top_background.png) no-repeat fixed left bottom;
29	background-size: cover;
30	margin: 0;
31	padding: 0;
32	display:  block;
33}
34

motuo

2017/04/14 02:28

私の環境(chrome)では再現せず、余白はできませんでした。できれば環境の明記と画面キャプチャでどこに余白が表示されているのかご提示いただけますか？

行動規範の内容に同意します

回答2件

動くサンプル：https://jsfiddle.net/wzc0Lswu/

書かれている状況が再現しません。
手元のHTMLが間違っていないか確認してみてください。また、使用している画像の端に「白」または「透明」が混ざっていたりしませんか？

追記：

デベロッパーツールで何が原因か確認してみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2017/04/14 02:29

編集2017/04/14 02:44

kei344

総合スコア69400

asanomito

2017/04/14 02:36

htmlはbody内しか貼っていませんでした。すいません。また、画像の端に白は入っていませんでした。画像を単色に差し替えても上に余白ができてしまいます。 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/normalize.css"> </head> <body> <section class="top" id="top"> <h1 class="catchcopy">CATCH COPY</h1> </section> <footer class="footer"> </footer> </body> </html>