2015-11-22 61 views
0

enter image description here奇怪的空間div之間出現 - HTML/CSS

爲什麼我的代碼創建的div之間的wied空間。

HTML:

<div id="container"> 
    <div id="header">  
     <p class="header_title">Theme Preview</p> 
     <p class="header_quote">Previewing Another Blog</p> 
    </div> 
    <div id="menu"> 
     <ul> 
      <li></li> 
      <li></li> 
     </ul> 
    </div> 
    <div class="post"> 
     <p class="post_title"></p> 
     <hr /> 
     <p> <span class="post_date"></span> <span class="post_autor"></span> </p> 
     <div class="post_content">  
     </div> 
     <hr class="post_final" /> 
    </div> 
    <div id="footer"> 
     <p>Design by</p> 
    </div> 
</div> 

CSS: 體{ 寬度:100%; background-color:#C1C8D0; 身高:自動; }

#container { 
    margin:auto; 
    max-width:1600px; 
    width:100%; 
    height:auto; 
} 

#header { 
    background-color:#1B1C1E; 
    width:100%; 
    height:auto; 
    text-align:center; 
} 

.header_title { 
    padding-top:5%; 
    color:white; 
    font-family:Agency FB; 
    font-size:5em; 
    text-align:center; 
} 

.header_quote { 
    color:#EBEBEB; 
    font-family:Agency FB; 
    font-size:1em; 
    text-align:center; 
    padding-bottom:5%; 
} 

#menu { 
    background-color:white; 
} 

我已經看過了CSS,我沒有寫任何保證金或一些相關的箱子空格。

回答

0

看起來好像你沒有重置CSS,所以每個瀏覽器都可以以不同的方式呈現CSS。爲了避免這種情況,我建議使用需要包含在所有CSS文件之前的CSS reset file。該文件將所有可能由不同瀏覽器應用的樣式重置爲一致的基準。

作爲一個「熱修復」,你仍然可以這樣做,但如前所述,使用CSS重置更爲常見。

添加margin: 0;.header_quote並添加以下CSS規則

#menu > ul{ 
    margin: 0; 
} 

Fiddle

0

我認爲這p標籤

p{margin: 0;} 
+0

這是一個小簡潔。請包括一些解釋爲什麼你認爲這是問題。 – APC