似乎不能刪除這兩個div之間的垂直空間

我似乎無法消除div元素和。我嘗試了各種各樣的東西，例如減少邊距和填充。但白帽不會消失。任何幫助表示讚賞。下面是HTML代碼：似乎不能刪除這兩個div之間的垂直空間

#container { 
 
    width  : 1300px; 
 
    margin-right : auto; 
 
    margin-left : auto; 
 
    background : #EEE; 
 
} 
 

 
#header { 
 
    background: rgb(197, 177, 224); 
 
    padding-top : 5px; 
 
    color  : black; 
 
    text-align : center; 
 
    padding-bottom: 5px; 
 
    border-style: solid; 
 
} 
 
#nav{ 
 
    margin-bottom: 0px; 
 
    background: red; 
 
} 
 

 

 
#nav ul { 
 
    list-style-type : none; 
 
    padding: 0px; 
 
} 
 

 
#nav li { 
 
    width   : 258px; 
 
    float   : left; 
 
    padding-top : 5px; 
 
    padding-bottom : 5px; 
 
    border-width : 1px; 
 
    border-style : solid; 
 
    background  : #FEF123; 
 
    text-align  : center; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
     <h1>Test Website 3</h1> 
 
    </div> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a href="">Home</a></li> 
 
     <li><a href="">Portfolio</a></li> 
 
     <li><a href="">Stuff</a></li> 
 
     <li><a href="">About Us</a></li> 
 
     <li><a href="">Logging In</a></li> 
 
     </ul> 
 
    </div>

來源

2017-08-05 Arnold Heinminthant

（http://imgur.com/bViJ36Q） - 這是白色的差距我指的是。希望圖像有所幫助。 –

在#nav中刪除ul標籤 – BladeMight

#nav ul { 
    list-style-type : none; 
    padding: 0px; 
    margin: 0; 
}

該訣竅：d

#container { 
 
    width  : 1300px; 
 
    margin-right : auto; 
 
    margin-left : auto; 
 
    background : #EEE; 
 
} 
 

 
#header { 
 
    background: rgb(197, 177, 224); 
 
    padding-top : 5px; 
 
    color  : black; 
 
    text-align : center; 
 
    padding-bottom: 5px; 
 
    border-style: solid; 
 
} 
 
#nav{ 
 
    margin: 0; 
 
    background: red; 
 
} 
 

 

 
#nav ul { 
 
    list-style-type : none; 
 
    padding: 0px; 
 
    margin: 0; 
 
} 
 

 
#nav li { 
 
    width   : 258px; 
 
    float   : left; 
 
    padding-top : 5px; 
 
    padding-bottom : 5px; 
 
    border-width : 1px; 
 
    border-style : solid; 
 
    background  : #FEF123; 
 
    text-align  : center; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
     <h1>Test Website 3</h1> 
 
    </div> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a href="">Home</a></li> 
 
     <li><a href="">Portfolio</a></li> 
 
     <li><a href="">Stuff</a></li> 
 
     <li><a href="">About Us</a></li> 
 
     <li><a href="">Logging In</a></li> 
 
     </ul> 
 
    </div>

來源

2017-08-05 10:44:37 Droid

如果您遇到過類似的其他問題，我建議您使用開發工具快捷鍵：WIN + F12或只是F12 – Droid

開發工具快捷方式？你的意思是說chorme？ –

是的，我發現鉻上的devtools比devtools其他瀏覽器更有用，我也聽到關於Firefox的好東西:) – Droid

你ul元素的邊距爲16px。刪除。

#container { 
 
    width  : 1300px; 
 
    margin-right : auto; 
 
    margin-left : auto; 
 
    background : #EEE; 
 
} 
 

 
#header { 
 
    background: rgb(197, 177, 224); 
 
    padding-top : 5px; 
 
    color  : black; 
 
    text-align : center; 
 
    padding-bottom: 5px; 
 
    border-style: solid; 
 
} 
 
#nav{ 
 
    margin-bottom: 0px; 
 
    background: red; 
 
} 
 

 

 
#nav ul { 
 
    list-style-type : none; 
 
    padding: 0px; 
 
    margin: 0; 
 
} 
 

 
#nav li { 
 
    width   : 258px; 
 
    float   : left; 
 
    padding-top : 5px; 
 
    padding-bottom : 5px; 
 
    border-width : 1px; 
 
    border-style : solid; 
 
    background  : #FEF123; 
 
    text-align  : center; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
     <h1>Test Website 3</h1> 
 
    </div> 
 
    <div id="nav"> 
 
     <ul> 
 
     <li><a href="">Home</a></li> 
 
     <li><a href="">Portfolio</a></li> 
 
     <li><a href="">Stuff</a></li> 
 
     <li><a href="">About Us</a></li> 
 
     <li><a href="">Logging In</a></li> 
 
     </ul> 
 
    </div>

來源

2017-08-05 10:47:58 Davy

我強烈建議使用「開發人員工具」，例如Google Chrome提供的工具。這可以大大縮短調試時間。 – Davy

你的意思是header和nav之間white-space，如果是的話那是因爲其中你需要改變，以減少間距默認ul標籤樣式屬性。

Default ul性質，

ul{ 
display: block; 
list-style-type: disc; 
margin-top: 1em; 
margin-bottom: 1 em; 
margin-left: 0; 
margin-right: 0; 
padding-left: 40px; 
}

正如你可以看到上面properties，它有margin-top and margin-bottom as 1em，因此，如果您更改到0將減少空白。

#container { 
 
    width: 1300px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    background: #EEE; 
 
} 
 

 
#header { 
 
    background: rgb(197, 177, 224); 
 
    padding-top: 5px; 
 
    color: black; 
 
    text-align: center; 
 
    padding-bottom: 5px; 
 
    border-style: solid; 
 
} 
 

 
#nav { 
 
    margin-bottom: 0px; 
 
    background: red; 
 
} 
 

 
#nav ul { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0; 
 
} 
 

 
#nav ul li { 
 
    width: 258px; 
 
    float: left; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    background: #FEF123; 
 
    text-align: center; 
 
}

<div id="container"> 
 
    <div id="header"> 
 
    <h1>Test Website 3</h1> 
 
    </div> 
 
    <div id="nav"> 
 
    <ul> 
 
     <li><a href="">Home</a></li> 
 
     <li><a href="">Portfolio</a></li> 
 
     <li><a href="">Stuff</a></li> 
 
     <li><a href="">About Us</a></li> 
 
     <li><a href="">Logging In</a></li> 
 
    </ul> 
 
    </div>

來源

2017-08-05 11:08:21 frnt

@Arnold Heinminthant請閱讀關於分配給標籤的默認樣式，因爲ul包含在這裏。 – frnt

似乎不能刪除這兩個div之間的垂直空間

回答

相關問題