Question

我在制作本网站的标题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。（＆＃39; Big＆＃39;类是我用于页面上所有主要元素的内容。）

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   
}

Answer 1

我添加了一个显示http://codepen.io/simondavies/pen/jWjoBy

的示例

工作请查看css，html等

我估计了一些东西......希望它会成为一种帮助

    <div class="big header">
      <div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
      <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>
          <li><!--<ul class="logo"></ul>--></li>
        </ul>
      </div>
    </div>

CSS

  body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .header {
    background-color: yellow;
    height: auto;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .header-img{
    width: 100%;
    height: 150px;
    padding: 30px 0 15px 0;
    margin: 0;
  }
  .header-img img {
    width: 100%;
    height: 150px;
    padding: 0;
    margin: 0;
  }

  .big {
    margin: 0 auto;
    padding: 0;
    margin-top: 10px;
    width: 80%;
    box-shadow: 0px 0px 20px #C5C5C5;
  }

  .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: 0;
    padding: 0;
  }

  .navbar ul {
    list-style-type: none;
    margin: 0;
    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
  }

Answer 2

HTML中有错误：

<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">

<ul>或<ol>的唯一后代应为<li>。可能这可能是问题所在。

我以两种方式更正了标记， without reproducing your issue：

将<ul class="logo">包裹在<li>内（基本上假设它是列表中的子列表
关闭第一个<ul>，然后让第二个列表与其相邻

但我也无法重现您的问题by leaving the markup alone

所以，问题可能是：

您需要使用CSS reset删除浏览器提供的默认边距和填充
还有另一个规则集是向.header
添加填充
- 其他规则集可能具有更高的特异性
- 其他规则集可能有!important声明

div底部不需要的填充

2 个答案: