【发布时间】：2018-05-13 18:41:37
【问题描述】：
我已经在这个菜单栏上工作了一段时间，我无法摆脱我的菜单栏和主体 div 之间大约 5 像素的间隙。
我知道这不是 div 之前的换行符（我查找过的类似问题之一），因为当我删除菜单栏时，div 就位于页面顶部。
我还尝试在与我的菜单相关的每个项目中设置 0 边距。我不知道我在这里做错了什么。
这里是测试页面：www.PartyArtisans.com/blank.php 这是我的 CSS 样式表：http://www.partyartisans.com/style.css 这是我的菜单栏 CSS。
#menu ul,
#menu li,
#menu span,
#menu a {
padding: 0;
position: relative;
}
#menu:after,
#menu ul:after {
content: '';
display: block;
clear: both;
}
body {
background-color: #95BDFF;
}
#menu {
font-family: Helvetica, sans-serif;
font-size: 18px;
line-height: 24px;
text-align: center;
margin:0px auto 0px auto;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul {
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 10%, #b87adfc 100%);
background: -moz-linear-gradient(top, #FFFFFF 10%, #b87adfc 100%);
background: -webkit-linear-gradient(top, #FFFFFF 10%,#b87adfc 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding:0px 20px 0px 20px;
margin:0px 0px 0px 0px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
list-style: none;
position: relative;
display: inline-table;
width:920px;
}
#menu ul:after {
content: "";
clear: both;
display: block;
}
#menu ul li {
width:20%;
float:left;
}
#menu ul li:hover {
background: #FFFFFF;
background: linear-gradient(top, #FFFFFF 0%, #CCF0FF 100%);
background: -moz-linear-gradient(top, #FFFFFF 0%, #CCF0FF 100%);
background: -webkit-linear-gradient(top, #FFFFFF 0%,#CCF0FF 100%);
background-image: linear-gradient(#FFFFFF, #CCF0FF);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCF0FF',GradientType=0 ); /* IE6-9 */
}
#menu ul li:hover a {
color: #00C5FC;
}
#menu ul li a {
width:auto;
display: block;
padding: 10px 10px;
color: #00C5FC;
text-decoration: none;
}
#menu ul ul {
width:auto;
background: #E8F8FF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
#menu ul ul li {
width:auto;
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menu ul ul li a {
width:350px;
color: #00C5FC;
}
#menu ul ul li a:hover {
background: #333399;
color: #EEFFFF;
}
这是 html，虽然我不认为这与它有任何关系：
<nav id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Information</a>
<ul>
<li><a href="DanielPeterse.php">About Dan The Balloon Man</a></li>
<li><a href="Jobs.php">Looking for a job?</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="BalloonTwisting.php">Balloon Twisting Entertainment</a></li>
<li><a href="FacePainting.php">Face Painting</a></li>
<li><a href="InteractiveMusic.php">Interactive Music with Miss Mary Kate</a></li>
<li><a href="HouseBand.php">Party Artisans Cover Band</a></li>
<li><a href="Decor.php">Balloon Decor and Large Sculptures</a></li>
</ul>
</li>
<li><a href="Reviews.php">Reviews</a></li>
<li><a href="Booking.php">Book us!</a></li>
</ul>
</nav>
我知道这有点乱，我复制并修改了一段时间以学习 CSS。
已解决：我在下载 Firebug 后设法弄明白了。 我变了
line-height: 24px;
到
line-height: 10px;
以及它的外观我想要的外观。 耸耸肩
【问题讨论】：
-
主体div是什么意思？那个 div 的代码在哪里？
-
是的，它可能是具有间距/填充的 div
-
jsfiddle.net/U48Bs 如果我没记错的话，有没有差距？所以这个差距可能来自其他东西。你有设置
body { margin: 0; padding: 0; }吗？编辑：即使将您链接的 CSS 插入小提琴中，我也无法重现该间隙。顺便说一句，我的一个值是零，你不必写“0px”，“0”就足够了:-) -
似乎是水平菜单项的行高造成了间隙。我将#menu 的CSS 更改为
line-height:10px;，差距就消失了。不一定是最终解决方案，但绝对是一个线索。 jFiddle here. -
行高起到了作用，在阅读您的相关信息之前，我自己尝试过。我不知道它为什么起作用，但它确实起作用了：S