Css 如何在引导中删除页眉上方和页脚下方的额外空白？_Css_Bootstrap 4_Header_Footer

Css 如何在引导中删除页眉上方和页脚下方的额外空白？

css bootstrap-4

Css 如何在引导中删除页眉上方和页脚下方的额外空白？,css,bootstrap-4,header,footer,Css,Bootstrap 4,Header,Footer,我在bootstrap中开发了一个页眉和页脚，并用CSS对它们进行了样式化。但是页眉上方和页脚下方都有空白。我不确定是什么原因导致出现空白代码如下： header.php <html dir="ltr" lang="en"> <head> <title></title> <link rel="stylesheet" href="css/main.css" media="all"> <link href="

我在bootstrap中开发了一个页眉和页脚，并用CSS对它们进行了样式化。但是页眉上方和页脚下方都有空白。我不确定是什么原因导致出现空白

代码如下：

header.php

<html dir="ltr" lang="en">
<head>

<title></title>

    <link rel="stylesheet" href="css/main.css" media="all">

    <link href="css/main.css" rel="stylesheet">
    <meta charset='utf-8' />
    <link href='fullcalendar.min.css' rel='stylesheet' />
    <link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
    <script src='lib/moment.min.js'></script>
    <script src='lib/jquery.min.js'></script>
    <script src='fullcalendar.min.js'></script>
</head>

 <nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
    <img src="images/logo.png" alt="Logo">

</nav>

footer.php

<footer class="footer">
<div class="container">
    <p class="m-20 text-center text-white"><br></p>
</div>

</footer>

main.css

body {
margin-top: 60px;
margin-bottom: 100px;
}

.footer {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px; 
background-color: #CC0033;
}

#topNav {
position: sticky;
width: 100%;
height: 70px;
line-height: 60px; 
background-color: #CC0033;
}

header.php
页脚


main.css
身体{
边缘顶部：60像素；
边缘底部：100px；
}
.页脚{
位置：粘性；
底部：0；
宽度：100%；
高度：60px；
线高：60px；
背景色：#CC0033；
}
#顶置导航{
位置：粘性；
宽度：100%；
高度：70像素；
线高：60px；
背景色：#CC0033；
}

我不知道你到底想做什么，但这是我得到的，问题在于CSS，但请检查nav中的类正在做什么

html，正文{
身高：100%；
}
身体{
职位：相对
}
.页脚{
位置：固定；
底部：0；
宽度：100%；
高度：60px；
线高：60px；
背景色：#CC0033；
左：0；
}
#顶置导航{
位置：固定；
排名：0；
左：0；
宽度：100%；
高度：70像素；
线高：60px；
背景色：#CC0033；
}

你好。请在插入所有相关代码的同时，编辑您的问题并单击Ctrl+M以插入代码。您是否检查了浏览器工具中的元素并查看了布局和规则（firefox）或样式和计算（chrome）？嘿！这确实会删除额外的空格，但在本例中，主体与标题重叠。如何将主体与标题分开？您的意思是标题现在隐藏在主体下？？如果是这种情况，那么可能在标题上添加z索引就可以了：#topNav{位置：固定；顶部：0；左侧：0；宽度：100%；高度：70px；线条高度：60px；背景色：#CC0033；z索引：2；}