頁腳和內容之間的 CSS 空白

Question

所以我有一個我想使用的頁腳模板，但是當我在頁腳和頁眉之間添加內容時，我在頁腳和內容之間留下了一個空白。 可能是什么問題我沒有在元素上使用任何邊距。 HTML 頭

<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap 4 Navbar</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter- 
 bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css">

</head>

標題

<header>
<!--- Navbar --->
<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand text-white" href="#"><i class="fa fa-graduation-cap fa-lg mr-2"></i>BLOG</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nvbCollapse" aria-controls="nvbCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="nvbCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-home fa-fw mr-1"></i>Anasayfa</a>
                </li>
                <li class="nav-item active pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-th-list fa-fw mr-1"></i>Blog</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-info-circle fa-fw mr-1"></i>Hakkımızda</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-phone fa-fw fa-rotate-180 mr-1"></i>İletişim</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-user-plus fa-fw mr-1"></i>Kayıt Ol</a>
                </li>
                <li class="nav-item pl-1">
                    <a class="nav-link" href="#"><i class="fa fa-sign-in fa-fw mr-1"></i>Oturum Aç</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--# Navbar #-->
</header>

頁腳

<footer>
    <div class="jumbotron jumbotron-fluid bg-secondary p-4 mt-5 mb-0">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 cizgi">
                    <div class="card bg-secondary border-0">
                        <div class="card-body text-light text-center">
                            <h5 class="card-title text-white display-4" style="font-size:30px">Telif Hakkı</h5>
                        <p class="d-inline lead">Tüm Hakları Saklıdır © 2018<br>
                        <a href="#" class="text-light d-block lead">Blog</a>
                        </p>

                        </div>
                    </div>
                </div>
                
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 cizgi">
                    <div class="card bg-secondary border-0">
                        <div class="card-body text-center">
                            <h5 class="card-title text-white display-4" style="font-size:30px">İletişim</h5>
                            <a class="text-light d-block lead" style="margin-left: -20px" href="#"><i class="fa fa-phone mr-2"></i>+90 (000) 000 0 000</a>
                            <a class="text-light d-block lead" href="#"><i class="fa fa-envelope mr-2"></i>admin@localhost.com</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
                    <div class="card bg-secondary border-0">
                        <div class="card-body text-center">
                        <h5 class="card-title text-white display-4" style="font-size:30px">Sosyal Medya</h5>
                
                                <a class="text-light" href="#"><i class="fa fa-facebook-square fa-fw fa-2x"></i></a>
                            
                                <a class="text-light" href="#"><i class="fa fa-twitter-square fa-fw fa-2x"></i></a>
                            
                                <a class="text-light" href="#"><i class="fa fa-instagram fa-fw fa-2x"></i></a>
                            
                                <a class="text-light" href="#"><i class="fa fa-linkedin fa-fw fa-2x"></i></a>
                            
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</footer>

和 CSS

.navbar { background-color: #484848; }
.navbar .navbar-nav .nav-link { color: #fff; }
.navbar .navbar-nav .nav-link:hover { color: #fbc531; }
.navbar .navbar-nav .active > .nav-link { color: #fbc531; }

footer a.text-light:hover { color: #fed136!important; text-decoration: none; }
footer .cizgi { border-right: 1px solid #535e67; }
@media (max-width: 992px) { footer .cizgi { border-right: none; } }

這就是我的瀏覽器上顯示的內容

無論我在頁眉和頁腳之間添加什么任何想法，這個空白都會留在那里？

添加了簡單的文本來演示空白

Answer 1

我正要回答同樣的<div class="jumbotron jumbotron-fluid bg-secondary p-4 mb-0">

Answer 2

沒關系，我發現是什么導致了它，我使用的 boostrap 模板將屬性 mt-5 添加到頁腳類，這是一個 boostrap 屬性，它為元素添加頂部邊距，將其更改為 mt-0 為我修復了它。

頁腳和內容之間的 CSS 空白

問題描述

2 個解決方案

解決方案1
1 已采納 2021-07-26 19:00:01

解決方案2
-1 2021-07-26 18:52:03

頁腳和內容之間的 CSS 空白

問題描述

2 個解決方案

解決方案1 1 已采納 2021-07-26 19:00:01

解決方案2 -1 2021-07-26 18:52:03

解決方案1
1 已采納 2021-07-26 19:00:01

解決方案2
-1 2021-07-26 18:52:03