請問各位前輩，我的原始碼如下，幫我看看我的標題區DIV下方出現間距，該怎麼寫才能與其他DIV密合，如果設定標題區的DIV高度就沒問題，但沒設定高度會出現間距，請問這是甚麼原因，因為之前測試雙欄版型寫div* {margin:0;}
都不會出現間距，3欄式的就會出現間距
<style type="text/css">
#wrapper {
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding:10px;
background-color:#666;
}
#header {
background-color: #09F;
}
#sidebar1 {
width: 200px;
background-color: #9C0;
float: left;
}
#content {
background-color: #FC9;
width: 580px;
float: left;
}
#sidebar2 {
background-color: #96F;
width: 220px;
float: right;
}
#footer {
background-color: #C09;
clear: both;
}
div* {
margin: 0;
}
ul,p {
padding-top: 16px;
}
</style>
</head>
<body>
<div id=wrapper>
<div id="header">
<h1>標題區</h1>
</div>
<div id="sidebar1">
<h1>左側邊攔區</h1>
<ul>
<li><a href="#">選單項目</a></li>
<li><a href="#">選單項目</a></li>
<li><a href="#">選單項目</a></li>
<li><a href="#">選單項目</a></li>
<li><a href="#">選單項目</a></li>
<li><a href="#">選單項目</a></li>
</ul>
</div>
<div id="content">
<h1>內容區</h1>
<p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容。</p>
<p>這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容這是內容。</p>
</div>
<div id="sidebar2">
<h1>右側邊攔區</h1>
<ul>
<li><a href="#">選項清單</a></li>
<li><a href="#">選項清單</a></li>
<li><a href="#">選項清單</a></li>
<li><a href="#">選項清單</a></li>
<li><a href="#">選項清單</a></li>
<li><a href="#">選項清單</a></li>
</ul>
</div>
<div id="footer">
<h1>版權宣告區</h1>
</div>
</div>
</body>
eakfix">
Dear ～
div 設定 height 屬性，因為區塊高度是往下延展，所以會產生「密合」效果，但實際上指定 #header 的高度後，文字與下邊線的 padding-bottom 值已經和原來的不一樣了。
上次我是寫 div * { 唷！您這次寫的是 div* {，有沒有發現哪裡不一樣呢？div 和 * 星號之間〝一定〞要插入一個半形空白唷！
倘若我們把 div* 改成 div *，結果會如下圖：
檢視圖片#header {
background-color: #09F;
}
改成：
#header h1 {
background-color: #09F;
margin-bottom:0;
}
留言列表
