HTMLでコピーライトの上下に隙間が出来てしまいます。

Question

WEB制作初心者です。
コピーライトの上下に白い隙間が出来てしまいます。どうしたら埋めることが出来ますか？
解説よろしくお願いします。

【HTML】

<div class="footer">
            <div class="dogoart_logo">
                <img src="img/dogoart_logo.svg" alt="道後アートロゴ">
            </div>
            <div class="footer_text">
                <div class="footer_text_top">
                    <h1>日比野克彦×道後温泉 道後アート2019・2020
                        <br>
                        「ひみつジャナイ基地プロジェクト」
                    </h1>
                </div>
                <div class="footer_text_botom">
                    <div class="footer_text_left">
                        <h1>
                            ■道後アート実行委員会事務局
                        </h1>
                        <p>愛媛県松山市道後湯之町5-6
                            <br>
                            (松山市産業経済部 道後温泉事務所内)
                            <br>
                            TEL：[phone]　FAX：[phone]
                        </p>
                    </div>
                    <div class="footer_text_right">
                        <h1>
                            ■道後アート実行委員会事務局
                        </h1>
                        <p>
                            愛媛県松山市道後湯之町6-8
                            <br>
                            （道後温泉旅館協同組合 道後観光案内所内）
                            <br>
                            TEL：[phone]（8:30〜19:00）　MAIL：[e-mail]
                        </p>
                    </div>
                </div>
            </div>
        </div>
    <div class="copy_right">
        <p>© 2019 dogo-art All Rights Reserved.</p>
    </div>
</body>

</html>

【css】

.footer{
    max-width: 1140px;
    background-color: gray;
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
}
.footer {
    display: flex;
}
.dogoart_logo {
    flex: 1;
    margin: 3em;
}
.footer_text {
    flex: 5;
    display: column
}
.footer_text p {
    font-size: 0.8em;
}
.footer_text h1 {
    font-size: 0.9em;
}
.footer_text_botom {
    display: flex;
    justify-content: space-around;
}
.copy_right {
    background-color: gray;
    max-width: 1140px;
    margin: 0 auto;
}
.copy_right p {
    text-align: center;
}

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

こんにちは。
ところでCSSの最初で余白のリセットをしていますか？

*{
	margin: 0;
	padding: 0;
}

を書くことで勝手にできてしまう余白を一度リセットすることができます。
これを挿入したところ、余白が消えたので多分大丈夫だと思います。

ブラウザは余白のない要素に勝手に余白をつけてしまうので、このコードは必須です。
「CSS　謎の余白」などとググると色々出てくるので、ぜひ読んでみてください。
ysd-lab.jp/wdbasic/help/margin.html

また、chromeの検証機能(デベロッパーツール)を利用されていますか？
謎の余白ができてしまった場合、検証機能を利用すればどの要素にどんな余白（margin/paddingなど）がついているか調べることができます。
web制作では必須なので、もしこちらもご存じでないようでしたら調べてみてください。
saruwakakun.com/html-css/basic/chrome-dev-tool

既にご存じの内容でしたらすみません????

Comments

[takawork]

わかりやすい回答ありがとうございます！

Answer 2

p要素についているデフォルトのスタイルシートのmarginが影響しています。その要素にmargin: 0;とするだけで隙間は解消します。

【デフォルトCSSとリセットCSS】
https://web-manabu.com/html-css20/

【各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge | コリス】
https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html

【リセットCSS、ノーマライズCSS、サニタイズCSSの違い - Qiita】
https://qiita.com/sfp_waterwalker/items/30d5c48b64d887269c89

---

また、marginで隙間が開くのは「marginの相殺」の問題なので、調べてみてください。

【[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック | コリス】
https://coliss.com/articles/build-websites/operation/css/about-collapsing-margins.html

【marginの相殺の理解を深めよう | Stocker.jp / diary】
https://stocker.jp/diary/margin-offset/