フッターの上に隙間ができてしまいます

Question

フッターの上に隙間ができてしまいます。
前にもできたことがあったのですが、その時は全体をdivで囲って、overflow:hidden;で解決できました。
ですが今回は、agterを使っているためか、レイアウトが崩れてしまいます。
この隙間はどこが原因でできているのでしょうか。

<header>
  <h1 class="site-title">
    <a href="./nmt.html">
      <img src="img/site-logo.png" class="logo">
    </a>
  </h1>

  <!-- ハンバーガーメニュー部分 -->
<div class="drawer" id="burger">

  <!-- ハンバーガーメニューの表示・非表示を切り替えるチェックボックス -->
  <input type="checkbox" id="drawer-check" class="drawer-hidden" >

  <!-- ハンバーガーアイコン -->
  <label for="drawer-check" class="drawer-open" id="click"><span></span><p class="menu">menu</p>
  </label>

  <!-- メニュー -->
  <nav class="drawer-content">
    <ul class="drawer-list" id="humber">
      <li class="drawer-item">
        <a href="#desa" style="text-decoration:none;">About</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#services" style="text-decoration:none;">Service</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#newses"  style="text-decoration:none;">news</a>
      </li><!-- /.drawer-item -->
      <li class="drawer-item">
        <a href="#contacts" style="text-decoration:none;">Contact</a>
      </li><!-- /.drawer-item -->
    </ul><!-- /.drawer-list -->
  </nav>
  <span class="burger-musk" id="musk"></span>
</div><!--drawer-->
</header>

<div class="contents">
<div class="first">
  <div class="company">
    <p class="copy">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p>
    <h1 class="copy design">DESIGN<br>FOR<br>SMILE</h1>
  </div>
</div><!--first-->
</div><!--contents-->

<section class="about-wrapper">
  <div class="about-img">
   <div class="about">
     <h2>ABOUT US</h2>
     <p>DIGSMILEは、デザインで人を笑顔にする会社。<br>
    なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。<br>
    DIGSMILEの社名にはそんな想いが込められています。
    </p>
    <div class="btn">
      <a href="./about" class="link-btn" style="text-decoration:none;">view more</a>
    </div>
   </div><!--about-->
  </div><!--about-img-->
</section> <!--about-wrapper--> 

<div class="contents-wrapper">
  <div class="photos">
  <div class="works">
    <h2>WORKS</h2>
    <img src="img/works-img.png">
    <p>DIGSMILEの制作実績を紹介します。</p>
    <div class="btn">
      <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
    </div><!--btn-->
  </div><!--works-->
  <div class="culture">
    <h2>CULTURE</h2>
    <img src="img/culture-img.png">
    <p>DIGSMILEの社内文化について紹介します。</p>
    <div class="btn">
      <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
    </div><!--btn-->
  </div><!--culture-->
  </div><!--photos-->
</div><!--contents-wrapper--->

<section class="latest-topics">
 <div class="latest-size">
  <h2>LATEST TOPICS</h2>
  <div class="topics">
   <div class="topic">
    <p class="date">2020.02.01</p>
    <p class="news">イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</p>
   </div>
   <div class="topic">
    <p class="date">2020.01.18</p>
    <p class="news">プレスリリースのお知らせ DIGGIN’ RECORDS</p>
   </div>
   <div class="topic">
    <p class="date">2020.01.01</p>
    <p class="news">新年開けましておめでとうございます</p>
   </div>
  </div><!--topics-->
  <div class="btn topic-btn">
    <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
  </div><!--btn-->
 </div><!--latest-size-->
</section><!--latest-topics-->

<section class="contact-wrapper">
<div class="contact-size">
 <h2>CONTACT</h2>
  <div class="recruit">
   <p>制作の依頼、取材の依頼、IRや採用についての連絡・お問い合わせはコンタクトページから承っております。<br>
  まずはお気軽にご連絡ください。担当者から改めて返信いたします。</p>
   <img src="img/recruit-img.png">
  </div><!--recruit-->
  <div class="contact-btn">
    <a href="#" style="text-decoration:none;" class="link-btn">READ MORE</a>
  </div>
</div><!--contact-size-->
</section>

<footer>
  <p>©2018 DIGSMILE INC.</p>
</footer>

html {
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
/* ヘッダー */
header {
  height: 60px;
  width: auto;
  position: absolute;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.logo {
  margin-left: 50px;  
  top: 0px;
  right: 0px;
}

.contents {
  height: 90%;
}
/*ファーストビュー*/
.first {
  height: 100%;
  background-image: url(img/kv-img.png);
  height: 90%;
  width: 80%;
  background-size: cover;
  z-index: 5;
  padding: 0;
  margin: 0;
}

.first::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #222;
  width: 50%;
  height: 90%;
  z-index: -1;
}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 15%;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
  float: right;
  z-index: 100;
  position: fixed;
  top: 0px;
  right: 0px;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/*menuクリックでトーンを下げる*/
#drawer-check:checked ~ .burger-musk{
  opacity: 1;
  transition: .8s;
}

/* メニューのデザイン*/
.drawer-content {
  width: 30%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(12, 12, 12, 0.911);
  transition: .5s;
  text-align: center;
  padding-top: 100px;
}

.drawer-content ul {
  list-style: none;
}

.drawer-content a {
  color: white;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 70%;/* メニューを画面に入れる */
}
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}
/*ハンバーガーメニュー*/
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

.drawer-item {
  font-size: 30px;
  padding-bottom: 40px;
}

.drawer {
  display: block;
}

.burger-musk {
  background-color: rgba(56, 56, 56, 0.603);
  width: 100%;
  height: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  opacity: 0
}

body.nonscroll {
  overflow: hidden;
}

.change-color {
  color: #222;
}

.menu {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  float: right;
  margin-left: 100px;
  padding-top: 0;
  font-family: 'arial black';
}

.copy {
  display: flex;
  justify-content: flex-end;
  color: #fff;
}

.design {
  font-family: 'arial black';
  margin-top: 0;
}

.company {
  z-index: 100;
  padding-top: 180px;
  margin-right: -100px;
}

.company h1 {
  font-size: 50px;
}

/*about*/
.about-wrapper {
  height: auto;
  position: relative;
  width: 70%;
  margin: 0 auto;
  bottom: 0;
}

.about-img {
  background-image: url(img/about-img.png);
  background-size: cover;
  padding: 110px 0 110px 50px;
  background-position: center;
  margin-top: 200px;
  bottom: 0;
}

.about {
  background-color: #fff;
  margin-top: 100px;
  display: block;
  width: 40%;
  height: 50%;
  padding: 30px 60px;
  line-height: 30px;
}

.about p {
  margin-top: 30px;
  font-size: 15px;
}

.about a {
  margin-bottom: 50px;
}

/*リンクボタン*/
.link-btn {
  color: #fff;
  background-color: #222;
  padding: 15px 50px;
  font-size: 15px;
}
.btn {
  margin: 30px 0 30px 0;
}

/*コンテンツ*/
.contents-wrapper {
  position: relative;
}

.contents-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  background-color: rgba(219, 219, 219, 0.76);
  width: 100%;
  height: 200%;
  z-index: -1;
  top: -200px;
  left: 0;
}

.photos {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 70%;
  margin-top: 120px;
}

.contents-wrapper img {
  width: 100%;
}

.contents-wrapper h2,.contact-wrapper h2,.latest-topics h2,.about h2,
.works h2,.culture h2{
  font-family: 'arial black';
  letter-spacing: 2px;
  left: 0;

}
.contents-btn {
  margin: 50px 0 50px 0;
}

/*LATEST TOPICS*/
.latest-topics {
  background-color: #fff;
  z-index: 10;
  height: 60%;
}

.latest-size {
  height: 400px;
  width: 70%;
  margin: 0 auto;
  margin-top: 140px;
}

.latest-size h2 {
  display: inline-block;
  margin-top: 50px;
}

.topics {
  margin-left: 500px;
}

.topic-btn {
  display: flex;
  justify-content: flex-end;
}

.date {
  font-size: 10px;
  color:rgb(161, 161, 161)
}

.news {
  display: block;
  border-bottom: solid 1px  rgba(136, 134, 134, 0.76);
  margin-bottom: 50px;
}

/*コンタクト*/
.contact-wrapper {
  width: 100%;
  background-color: rgba(219, 219, 219, 0.76);
  height: 70%;
  margin: 0;
  overflow: hidden;
}
.contact-size {
  width: 70%;
  margin: 0 auto;
  height: 100%;
}

.recruit {
  display: flex;
  justify-content: space-between;
}

.contact-size h2 {
  display: inline-block;
  margin-top: 150px;
  height: 100px;
}

.recruit p {
  display: block;
  width: 40%;
}

.recruit img {
  margin-top: -150px;
  padding-bottom: 90px;
  height: 100%;
}

.contact-btn {
  margin-top: -170px;
}

/*フッター*/
footer {
  height: 60px;
  background-color: rgba(92, 91, 91, 0.925);
  margin-top: 0;
}
footer p {
  line-height: 60px;
  color: #fff;
  text-align: center;
  font-size: 10px;
}

Comments

[meg_]

確認したブラウザは何ですか？

Answer 1

こちらの原因として、 footer pにブラウザ独自のスタイルが適応されているため、起きている現象です。

対策としては、 margin: 0;を追記すれば解決します。

footer p {
  /* その他の記述 */
  margin: 0;
}

また、上記のようなものを基本的には適応されない方法もありますので、cssを記載する際は入れておくと良いです。

https://web-camp.io/magazine/archives/30817

Comments

[azaz_wb]

リセットCSSはやはり記載しておいた方が良いのですね。
ありがとうございました。