在網頁頂部導致奇數間距的CSS

在我正在構建的測試頁上，我將這個奇數間距顯示在頁面頂部，我不確定這是爲什麼。在網頁頂部導致奇數間距的CSS

正如你可以從下面的CSS看到，身體標記有margin和padding設置爲0

這裏的測試網站的網址，看看我的意思間距：http://s361608839.websitehome.co.uk/testsite/index.html

CSS ：

body{ 
background: #4f6ca6; 
margin: 0; 
padding: 0; 
} 

#header{ 
background:url(../images/header_bg.jpg) no-repeat center top; 
height: 328px; 
width: 100%; 
border-bottom: 1px solid #223c6d; 
-webkit-box-shadow: 0 8px 6px -6px #254379; 
-moz-box-shadow: 0 8px 6px -6px #254379; 
box-shadow: 0 8px 6px -6px #254379;  
} 

#slider{ 
width: 960px; 
height: 328px; 
margin: 0 auto; 
}

HTML：

<div id="header"> 
<div id="slider"> 
<h1>Test Site</h1> 
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2> 
</div> 
</div>

來源

2012-04-25 Tim

您的<h1>標籤有30px保證金。

這就是所謂的檢查：

enter image description here

瞭解它，喜歡它，然後濫用它。

來源

2012-04-25 23:13:20 Marty

喜歡你的答案。將不得不開始注意到Chrome中的檢查元素功能，以幫助我在未來發現:)謝謝！ – Tim 2012-04-25 23:30:06

這是您的h1元素的最高邊距。

來源

2012-04-25 23:10:20 PeeHaa

您應該考慮對大多數元素進行初始重置。這意味着您最初需要更多的工作，但是可以給您更大的控制權並顯着簡化了故障排除。

Meyer reset是一個非常普遍的起點。

來源

2012-04-25 23:14:08

在網頁頂部導致奇數間距的CSS

回答

相關問題