ブラウザ由来の<h1>タグに含まれるmarginを削除したい(HTML&CSS初心者）

前提・実現したいこと

初めて質問させて頂きます。

とあるプログラミングサイトで出た課題の模写を行っている際に、<h1>（および<h2>）タグにCSSに記述のないmarginが含まれていることがわかりました。
調べると、使用するブラウザに起因するデフォルトのmarginとのことですが、リセットCSSや各セレクタにmargin:0を指定しても反映されません。
なお、HTMLファイルにおけるStyleタグではさすがに反映するのですが、できればこの方法は禁じ手としてなるべく取りたくないと考えています。

以上から、自分では気づいていない些細なミスなどがHTMLあるいはCSSに含まれているのかもしれません。
恐れ入りますが、ご指摘の程いただければ大変有難く存じます。
どうぞ宜しくお願いいたします。

発生している問題・エラーメッセージ

こちらのオレンジ色の部分がブラウザに起因するmargin（上下93.8px）だと思われます。
下のh2タグ内「プログラミングへようこそ」もそれぞれ上下のmarginを含んでいました。

該当のソースコード

HTML
1<!DOCTYPE html>
2<!-- saved from url=(0022)http://127.0.0.1:5500/ -->
3<html lang="ja">
4
5<head>
6    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <meta http-equiv="X-UA-Compatible" content="ie=edge">
10
11    <title>Progate初級道場編</title>
12    <link rel="stylesheet" href="./index_files/style.css">
13</head>
14
15<body>
16
17
18    <header>
19        <div class="header-logo">Progate</div>
20        <div class="header-list">
21            <ul>
22                <li>プログラミングとは</li>
23                <li>学べるレッスン</li>
24                <li>お問い合わせ</li>
25            </ul>
26        </div>
27    </header>
28
29
30    <main>
31        <div class="copy-container">
32            <h1>HELLO WORLD<span>.</span></h1>
33            <h2>プログラミングの世界へようこそ</h2>
34            <div class="contents">
35                <h3 class="section-title">学べるレッスン</h3>
36                <div class="contents-item"><img src="./index_files/html.svg">
37                    <h3>HTML</h3>
38                    <p>HTMLは～・・・・・・・</p>
39                </div>
40                <div class="contents-item"><img src="./index_files/php.svg">
41                    <h3>CSS</h3>
42                    <p>CSSは～・・・・・・・</p>
43                </div>
44                <div class="contents-item"><img src="./index_files/ruby.svg">
45                    <h3>PHP</h3>
46                    <p>PHPは～・・・・・・・</p>
47                </div>
48                <div class="contents-item"><img src="./index_files/swift.svg">
49                    <h3>Ruby</h3>
50                    <p>Rubyは～・・・・・・・</p>
51                </div>
52            </div>
53        </div>
54        <div class="contact-form">
55            <h3 class="section-title">お問い合わせ</h3>
56            <p>メールアドレス</p>
57            <input>
58            <p>お問い合わせ内容</p>
59            <textarea></textarea>
60            <input type="button" value="送信">
61        </div>
62    </main>
63
64
65    <footer>
66
67        <div class="footer-logo">Progate</div>
68        <div class="footer-list">
69            <ul>
70                <li>会社概要</li>
71                <li>採用</li>
72                <li>お問い合わせ</li>
73            </ul>
74        </div>
75
76    </footer>
77
78
79    <!-- Code injected by live-server -->
80    <script type="text/javascript">
81        // <![CDATA[  <-- For SVG support
82        if ('WebSocket' in window) {
83            (function () {
84                function refreshCSS() {
85                    var sheets = [].slice.call(document.getElementsByTagName("link"));
86                    var head = document.getElementsByTagName("head")[0];
87                    for (var i = 0; i < sheets.length; ++i) {
88                        var elem = sheets[i];
89                        var parent = elem.parentElement || head;
90                        parent.removeChild(elem);
91                        var rel = elem.rel;
92                        if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
93                            var url = elem.href.replace(/(&|?)_cacheOverride=\d+/, '');
94                            elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
95                        }
96                        parent.appendChild(elem);
97                    }
98                }
99                var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
100                var address = protocol + window.location.host + window.location.pathname + '/ws';
101                var socket = new WebSocket(address);
102                socket.onmessage = function (msg) {
103                    if (msg.data == 'reload') window.location.reload();
104                    else if (msg.data == 'refreshcss') refreshCSS();
105                };
106                if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
107                    console.log('Live reload enabled.');
108                    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
109                }
110            })();
111        }
112        else {
113            console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
114        }
115	// ]]>
116    </script>
117
118</body>
119
120</html>

CSS
1
2/*---ヘッダー部分---*/
3
4header  {
5    width: 100%;
6    height: 90px;
7    color: #fff;
8    background-color: #26d0c9;
9}
10
11.header-logo {
12    float: left;
13    padding: 20px 40px;/*上から固定するからfloatでもOK*/
14    font-size: 36px;
15    font-weight: normal;
16}
17
18.header-list li {
19    float: left;
20    padding: 33px 20px;/*上から固定するからfloatでもOK*/
21    list-style: none;
22}
23
24/*---コンテンツ部分---*/
25main {
26    padding: 100px 80px; 
27}
28
29.copy-container h1 {
30    margin: 0;
31    font-size: 140px;
32}
33
34span {
35    color: red;
36}
37
38 h2 {
39    margin: 0;
40    font-size: 60px;
41}

試したこと

１．CSSファイル冒頭でのリセットCSS　→　効かない
*{ margin:0; padding:0 }

２．各セレクタへの指定　→　両方効かない
.copy-container h1(h2)　および h1(h2)　の2パターンで { margin: 0; }を指定

３．Chromeの検証機能からの書き換え　→　効く
HTMLファイルに<style>タグでの修正

なお、VSCodeで全角を消すプラグインを入れております。

補足情報（FW/ツールのバージョンなど）

使用しているテキストエディタ：VSCode
ブラウザ：Google Chrome

お忙しいところ基本的な質問で恐れ入りますが、宜しくご教示の程お願い申し上げます。

hatsu

2019/08/25 07:32

CSSのパスが正しくないなどで、CSSが読み込まれておらずh1のマージンが消えない、という可能性があるかなと思いました。 h1以外のCSSは効いていますか？効いていない場合、・HTMLのCSSを読み込んでいる記述・CSSのファイル名,格納ディレクトリなどを知りたいです！

40Beginner

2019/08/25 08:22

hatsu様早速ありがとうございます。情報が不足しており失礼いたしました。 h1およびh2以外のCSS(例えばheader以下のヘッダー部分やmainのセレクタ)は効いているので、おそらくブラウザ由来のもの以外はきちんと反映できています。こういう状況ですが、もしよければ引き続きご助言いただけると嬉しいです。どうぞよろしくお願いいたします。

hatsu

2019/08/25 08:29

https://codepen.io/hatsu_38/pen/WNepxWO 例えば、このようにソースコードをコピーして試すとMarginが効いていると思うのですが、このようになっていない？もしくはやりたいことのイメージが違う？などありますか。「このようにしたいがなっていない」のであればCSSが正しく読み込まれていない、もしくは他に何か原因がありそうですね。

takopo

2019/08/25 08:59

htmlファイルの内容を全部載せていただいた方が回答を得られやすくなるのではないでしょうか… 全部とは <!DOCTYPE html> から </html>までのことです。

40Beginner

2019/08/25 09:04

hatsu様ありがとうございます。拝見すると、確かに効いています。そこで気づいたのが、フォントサイズが本来h1が140px、h2が60pxだったところ検証のため一桁カットしたままなのに、Webでの表示がそれぞれ140px、60pxのままだったことです。ひょっとしたらキャッシュの問題かもしれません。そこをクリアさせてからまたお邪魔したいと思います。ありがとうございます。

kei344

2019/08/25 09:08

「発生している問題」の部分はコードでないので、コードブロックで囲む必要はありません。

40Beginner

2019/08/25 09:14

takopo様ご指摘ありがとうございます。これから中座しないといけないので少しお時間いただきますが、2時間内に掲載させていただきます。引き続きよろしくお願いいたします。

40Beginner

2019/08/25 10:18

kei344様コメントありがとうございます。勉強不足で恐縮です、今回のエラーはおそらくブラウザに起因するもののためHTMLやCSSのコードを掲載しなくても良いという意味でしょうか。

kei344

2019/08/25 10:30

質問文内の「発生している問題・エラーメッセージ」の項目にある文章がコードブロック（```）で囲まれています。そこはコードではない上、画像が表示されないため、質問文を編集されてはいかがでしょう、という指摘です。

40Beginner

2019/08/25 10:38

kei344様ご指摘、ありがとうございました。おかげさまで無事画像表示ができました。以降、気を付けます。

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

回答1件

ベストアンサー

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

提示されたコードでmarginは反映されています。スーパーリロードを試してみてください。

【【みんなの知識ちょっと便利帳】Webページを最新の状態で見る - ブラウザーのフルリロード、スーパーリロード方法】
http://www.benricho.org/Tips/page_reload/

【Chromeブラウザでスーパーリロードする方法 #Pistatium】
http://kimihiro-n.appspot.com/show/86002

【Webブラウザのキャッシュ削除と、スーパーリロード方法一覧 | uzurea.net】
http://uzurea.net/cacheclear-and-superreload-2018/

投稿2019/08/25 10:44

kei344

総合スコア69407

40Beginner

2019/08/25 12:25 編集

kei344様ありがとうございます、おかげさまでご紹介いただいた2番目のサイトの方法で無事h1は解消できました！やはりキャッシュの問題だったのですね。ただ、h2はまだ残っており、Chromeの検証機能をたどるとなぜかh2のmargin指定がない状況でした。こちらもおそらくブラウザ側の読み込みに起因する問題のような気がしますので、ディベロッパーツールの使い方を含め見直してみたいと思います。他の皆様もお忙しい中ご助言ありがとうございました。おかげさまでteratailの使い方も勉強になりました。今後ともどうぞよろしくお願いいたします。

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