0
我想要在我正在处理的页面顶部的导航按钮（请参阅末尾的链接）更像下图，即它们应显示为制表符。我试着改变网页上几个元素的填充和边距，但我还没有运气。我怎样才能消除“主”div和导航栏之间的空间？ 
缩小填充，初学CSS
这里的HTML和CSS我使用生成的页面，在底部一个JFiddle链接：
body {
\t background-color: #090986;
}
#main {
\t background-color: white;
\t padding-left: .5em;
}
h1 {
\t text-align: center;
\t background-color: white;
}
#menu {
\t text-align: center;
}
#menu li{
\t display: inline;
\t padding:4px 30px 0px 1px;
}
#menu a {
\t color:#228;
\t background:#bbb;
\t padding:.1em .2em .2em .2em;
}
#menu li.current a{
\t background: white;
}
abbr {
border-bottom: 1px dotted #000;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Menu Page</title>
<link rel="stylesheet" title="Q1" href="style1.css" />
</head>
<body>
<h1>Sample Menu Page</h1>
<ul id="menu">
<li><a href="one.html">Page One</a></li>
<li class="current"><a href="two.html">Page Two</a></li>
<li><a href="three.html">Page Three</a></li>
<li><a href="four.html">Page Four</a></li>
<li><a href="five.html">Page Five</a></li>
</ul>
<div id="main">
<h2 id="first">First Section</h2>
<p>This is the first part of the real content of the page.</p>
<p>This exercise is mostly about:</p>
<ul>
<li><abbr title="Cascading StyleSheets">CSS</abbr></li>
<li>geese</li>
</ul>
<p>Actually, there isn't so much about geese. I just wanted to use a <code><ul></code> there.</p>
<h2 id="next">Next Section</h2>
<p>I'm really running out of stuff to say here. Oh well, fall back to old standards, I guess…</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
我会建议puttung中的jsfiddle你的代码。 https://jsfiddle.net/Oisins/c7p8rssa/1/ – Oisin
页边距是'h2'元素的上边距，由于边距塌陷，它会掉落到其父元素之外并将'ul'推开。 –
嗯....没有看到这个commin通过仔细阅读这一个..解决方案似乎被张贴......：D – repzero