CSS 无法删除标题和菜单导航栏之间的空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15274260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cant remove space between Header and Menu Nav bar
提问by Graham Wietzke
I for whatever reason cannot get rid of the gap between my header and the nav bar menu. I've tried every adjustment of padding/margins I can think of to either push it up or move the bar, but it just does funky stuff with the menu or pushes other content up. I need some help.
无论出于何种原因，我都无法消除标题和导航栏菜单之间的差距。我已经尝试了所有我能想到的内边距/边距调整来将其向上推或移动条，但它只是对菜单做一些时髦的事情或将其他内容向上推。我需要帮助。
and the code
和代码
#header_wrap {
width:100%;
height:144px;
text-align: center;
}
#header {
width:980px;
margin:0 auto;
}
#preloadedImages
{
width: 0px;
height: 0px;
display: none;
background-image:url(Logo/logo14hover.gif);
}
.site_logo {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14.gif) no-repeat;
}
.site_logo:hover {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14hover.gif) no-repeat;
}
.headerpic {
float:left;
width:678px;
height:144px;
background:url(Images/headerpic.gif) no-repeat;
}
#menu_wrap {
position:relative;
z-index:2;
text-align:center;
width:100%;
padding: 0px 0px;
}
#menu {
position:relative;
z-index:2;
width:1000px;
text-align:center;
margin:0 auto;
height:61px;
padding: 0px 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
padding: 0px 0px;
list-style:none;
position: relative;
display:inline-table;
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
text-shadow: 1px 1px #000000;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #736e57;
background: linear-gradient(top, #BBB38F 0%, #6B6441 40%);
background: -moz-linear-gradient(top, #BBB38F4 0%, #6B64415 40%);
background: -webkit-linear-gradient(top, #BBB38F 0%,#6B6441 40%);
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover a {
color:#FFFFFF;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li a {
color:#FFFFFF;
display: block;
padding: 12px 42px;
text-decoration:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover > ul {
background: #303030;
text-decoration:none;
display: block;
}
nav ul ul {
background: #303030;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:14px;
text-decoration:none;
color:#000;
font-weight:light;
outline:none;
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity:0.95;
}
nav ul ul li {
text-decoration:none;
float: none;
position: relative;
}
nav ul ul li a {
text-decoration:none;
padding: 0px 0px;
color:#000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul li a:hover {
text-decoration:none;
background: #736e57;
text-shadow: 1px 1px #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul {
text-decoration:none;
padding: 0px;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
padding: 10px 40px 10px 15px;
color:#000;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
text-align: left;
}
nav ul ul li a:hover {
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
background: #6B6441;
text-align: left;
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul ul {
position: absolute;
left: 100%; top:0;
}
and the HTML
和 HTML
<div align="center" id="header_wrap">
<div id="header">
<a href="index.html"><div id="preloadedImages"></div><div class="site_logo"></div></a>
<div class="headerpic"></div>
</div>
</div>
<!-- START MENU NAV BAR CODE -->
<div id="menu_wrap">
<div id="menu">
<nav>
<ul>
<li><a href="Company/company.html">Company</a>
<ul>
<li><a href="Company/mission.html">Mission</a></li>
<li><a href="Company/philosophy.html">Philosophy</a></li>
</ul>
</li>
<li><a href="Solutions/solutions.html">Solutions</a>
<ul>
<li><a href="Solutions/QPipe-Estimator/qpipe-estimator.html">Q Pipe Estimator</a>
<ul>
<li><a href="Solutions/QPipe-Estimator/advantage.html">Advantage</a></li>
<li><a href="Solutions/QPipe-Estimator/differentiator.html">Differentiator</a></li>
<li><a href="Solutions/QPipe-Estimator/features.html">Features</a></li>
<li><a href="Solutions/QPipe-Estimator/screenshots.html">Screen Shots</a></li>
</ul>
</ul>
</li>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="Services/technical-support.html">Technical Support</a></li>
<li><a href="Services/training.html">Training</a></li>
<li><a href="Services/customization.html">Customization</a></li>
<li><a href="Services/faqs.html">FAQ's</a></li>
</ul>
</li>
<li><a href="#">Industry</a>
<ul>
<li><a href="Industry/focus.html">Focus</a></li>
<li><a href="Industry/customers.html">Customers</a></li>
</ul>
</li>
<li><a href="Contact/contact-information.html">Contact</a>
<ul>
<li><a href="Contact/contact-information.html">Contact Information</a></li>
<li><a href="Contact/request-information.html">Request Information</a></li>
</ul>
</li>
<li><a href="http://web.qsoftsolutions.com/">Login</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- END MENU NAV BAR CODE -->
added fiddle link in comments
在评论中添加小提琴链接
回答by John
Simply remove the default margin for your main ul(the direct descendant of nav)
只需删除 main 的默认边距ul（ 的直接后代nav）
Select it using the following CSS, or giving that specific ula classor id(this way you target only the ulcausing you trouble).
使用以下 CSS 选择它，或指定特定的ulaclass或id（这样您只针对ul造成您麻烦的问题）。
nav > ul {margin: 0}
I stuck it into the top of your fiddle, and updated it here
我把它放在你的小提琴的顶部，并在这里更新
I realise this has now been answered because I took way too long formatting this, but I'd just like to point out that it has nothing to do with the box-shadowwhich has no impact on positioning.
我意识到现在已经回答了这个问题，因为我花了太长时间格式化这个，但我只想指出它与box-shadow对定位没有影响的无关。
回答by otinanai
The uldefault margin is responsible for this space. Try setting margin-top:0to nav ul. Demo: http://jsfiddle.net/xtsAx/8/
该ul默认保证金负责这个空间。尝试设置margin-top:0为nav ul。演示：http: //jsfiddle.net/xtsAx/8/
回答by Alok Rajasukumaran
for me the error was because i used dream weaver to edit my code.
this give me a hiccup by adding default headers.
when i removed those headers and just gave<html> <head>...<?php>....?> .... </html>it worked perfect.
always remove html tags and header by dream weaver.
对我来说，错误是因为我使用 Dream Weaver 来编辑我的代码。通过添加默认标题，这给我带来了麻烦。当我删除这些标题并<html> <head>...<?php>....?> .... </html>让它完美运行时。
总是通过 Dream Weaver 删除 html 标签和标题。
**Update: I had the same error again in Firefox so i applied
**更新：我在 Firefox 中再次遇到了同样的错误，所以我申请了
*{
margin:0;
padding:0;
}
And hence got rid of it completely now. **
因此现在完全摆脱了它。**
