頁腳上方的額外空白區

當我開始使用Google搜索這個問題時，我看到了類似的SO問題過多。但我嘗試了所有，沒有運氣。頁腳上方的額外空白區

我從某處獲得白邊。不知道在哪裏。

這裏是一個小提琴 https://jsfiddle.net/ayezee33/smxdewam/

這是我都試過了。

加邊距：0;和填充：0;到html和body。
拉上normalize.css
新增0保證金的塊級元素和子元素
找到
使用的！重要的電話覆蓋用戶代理樣式表插入8像素餘量（鉻），其
注意到用戶代理樣式表應用阻止我和試圖覆蓋，但我確定我真的想要的。

任何幫助將是偉大的。試圖弄清楚這一點我瘋了。

顯然我需要添加代碼來發布這個問題？

<header> 
    <h1>Building blocks are important!</h1> 
    <p>This website serves as my test to showcase my coding abilities</p> 
     <div id="cta"> 
      <input id="cta" name="email" placeholder="Email"> 
      <button type="submit">Learn More</button> 
     </div> 
</header> 

<div class="callout"> 
    <p>Testing this call out section</p> 

</div> 


.callout { 
display:block; 
max-width:100%; 
height:5em; 
background:#000; 
text-transform:uppercase; 
} 
.callout p { 
line-height:5em; 
margin:0; 
}

來源

2015-05-19 AyeZee33

在那個小提琴中有很多空白，你將不得不更加具體地指出你遇到的問題。 – Shaggy

的空間從利潤率來對你#cta：

margin: 1em auto;

簡化你的CSS過，我覺得你並不需要你的大部分規則。

來源

2015-05-19 15:15:16

啊，我覺得啞巴。謝謝。這確實是問題。我是自學成才的，並試圖找到更好的清潔代碼習慣。任何需要特殊清潔的ID？或者只是一般的整理東西？ – AyeZee33

np。也不要使用ID來定位CSS。改用類。僅對JavaScript鉤子使用ID。 ID對於模塊化開發並不靈活。另外，如果答案對您有幫助，請接受答案。 –

，並儘可能遠離黑客。編寫最簡單的CSS，然後逐步增強您的CSS。稀疏地使用hack並讓文檔自然呈現。這保證了跨瀏覽器的一致呈現。 –

#cta DIV的邊距是導致空白的那個。您可以將overflow:hidden添加到標頭，以解決問題。

<nav> 
    <div id="main-nav"> 
     <img src="img/logo.jpg" /> 
     <ul> 
      <li><a href="#">Nav 1</a></li> 
      <li><a href="#">Nav 2</a></li> 
      <li><a href="#">Nav 3</a></li> 
      <li><a href="#">Nav 4</a></li> 
     </ul> 
    </div>  
</nav> 

<header> 
    <h1>Building blocks are important!</h1> 
    <div id="cta"> 
     <input id="cta" name="email" placeholder="Email" /> 
     <button type="submit">Learn More</button> 
    </div> 
</header> 

<div class="callout"> 
    <p>Testing this call out section</p> 

</div> 

header { 
    overflow: hidden; 
}

來源

2015-05-19 15:15:34 chrisbedoya

頁腳上方的額外空白區

回答

相關問題