ヘッダーイメージの下に要素を作るとその下に謎の余白ができる

Question

#####ホームページでヘッダーの画像の下にどんどん作っていきたのですが、要素の下に謎の余白ができてしまいます。画像が原因だと思いvertical-alignなどで対処しましたが改善できませんでした。何が原因なのでしょうか？

](1500de7cc27067953ff24a896167874a.jpeg)

<div class="swiper-container">          
          <div class="swiper-wrapper"> 
            <div class="swiper-slide"><img src="/images/woman.jpg" alt="美容師向け動画サービス" class="img-fluid">
              <div class="btn slide-bg item head-btn">動画テンプレートを探す</div>
            </div>
            <div class="swiper-slide"><img src="/images/woman2.jpg" alt="ヘアスタイル写真" class="img-fluid">
              <div class="btn slide-bg item head-btn">動画テンプレートを探す</div>
            </div>     
          </div>      
          <div class="swiper-pagination swiper-pagination-black"></div>
      　　</div>
<section id="footer">
      <div class="footer-box">
      </div>
 </section>

.swiper-container{
  padding-top: 100px;
  margin-bottom: -100px;
}

.swiper-slide{
  position: relative;
  img{
  vertical-align: top;
  }
}

.swiper-pagination{
  padding-bottom: 85px;
}

.head-btn{
  position: absolute;
  top: -20vh;
  left: 60%;
}

.footer-box{
  height: 100px;
  background-color: black;

Comments

[Eggpan]

提示のコードだけでは再現できないので、事象を再現できるコードを記載いただくとより良い回答がつくと思います。現状ですとどこかしらのcssの影響かな、くらいの事しかわかりません。

[kdh]

ありがとうございます！

[niconic73027793]

.que-area {height: 90vh;position: relative;}
のように、　que-area の　height の値をあげていけば、余白消えませんか？

[kdh]

70.80とあげてみましたが消えませんでした。。。
このホームページのもっと上の画像が影響してそうなので質問を変えてみます。

Answer 1

全角スペースが原因です。
探して消してください。

あと、.swiper-paginationでpadding-bottom: 85px;を設定していて、当然これで空白ができますが、.swiper-containerのmargin-bottom: -100px;で強引に打ち消しているようですね。これはちょっと意図がわかりませんでした。

Answer 2

CSS にあまり詳しくはないですが、.que-area の「vh」が怪しい気がします。
「vh」は Viewport の高さに対する割合の為、60vh だと 60% ということになります。
その為、残りの 40% が空白になっているのではないでしょうか

.que-area{
  height: 60vh;
}

試しに .footer-box についても「vh」を指定してみては如何でしょうか？

.footer-box{
  /* height: 100px; */
  height: 40vh;
  background-color: black;
}

＜参考＞
■ 知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る
https://www.webprofessional.jp/css-viewport-units-quick-start/

Comments

[kdh]

ありがとうございます。
たぶんここではなくもっと上層の画像が問題だと思うので質問を変えてみます。