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