div底部不需要的填充

【问题标题】：Unwanted padding on the bottom of divdiv底部不需要的填充
【发布时间】：2016-02-23 06:54:11
【问题描述】：

我在制作这个网站的标题 div 时遇到问题。即使我的填充设置为 0，我的水平菜单栏下方也会出现填充或其他内容。我知道已经发布了类似的帖子，但我已经阅读了很多，但似乎没有一个答案对我有用。我已将标题 div 的背景更改为黄色以使其更明显。菜单栏两侧还有一两个像素是不需要的。我将把我的 css 和 html 代码放在下面。 screenshot

<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
    <li><a class="active" href="default.asp">Home</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About Us</a></li>
        <ul class="logo">
        <li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
        <li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
        <li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
        <li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
        </ul>
</ul>  

这里是相关的 CSS。 （'Big' 类是我用于页面上所有主要元素的类。）

body {
   background-image:url("Images/background.png");
   background:tile;
}

.header img {
   width: 100%; 
}

.header {
   background-color: yellow;
   height: auto;    
   padding-top: 30px;
   padding-left: 0px;
   padding-bottom: 0px;
   margin-top: 10px;
}


.big {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0px 0px 20px #C5C5C5;
}

这是我的导航栏的 css。

.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}

.navbar {
width: 100%;    
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px; 
}

.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}

.navbar li {
float: left;
}

.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}

.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}

.navbar li a:hover {
background-color: #111;
}

.logo img {
width: 25px;
}

.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}

.active {
background-color: #106AAA   
}

【问题讨论】：

• 您的 HTML 格式错误。您已关闭子菜单前的li。从那里开始。演示也会很有用。
• 您是否尝试将 .navbar 的 margin-top 设置为 0？还可以尝试将 .header * (.header and all children) 设置为 box-sizing: border-box;
• @Paulie_D 当我将子菜单放入
• 时，它会导致子菜单在初始菜单之后转到最左侧，但不会删除奇怪的填充。不过，我不确定您所说的演示是什么意思。我还尝试将 css 重置添加到我的 css 文件中。