1. 首頁
  2. 問答
  3. HTML5體間距問題

HTML5體間距問題

2012-12-04 105 views
2

我似乎無法刪除頁面的頂部，在這個例子中，<div>之間的間距：HTML5體間距問題

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Index</title> 
    <style type="text/css"> 
     html, body{ 
      padding: 0; 
      margin: 0; 
     } 
     #container{ 
      background-color: #808080; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <div id="inner-container"> 
      <h3>Index</h3> 
     </div> 
    </div> 
</body> 
</html>

我已經把範圍縮小到這一行：

<!DOCTYPE html>

看起來，刪除它會將<div>對齊到頁面頂部。我無法在CSS中看到實現相同目標的方法。

來源

2012-12-04 Phil

+1

可能這會幫助：[爲什麼HTML5 DOCTYPE與我的填充混亂？]（http://stackoverflow.com/questions/3003051/why-does-the-html5-doctype-mess-with-my-padding ） – SajjadHashmi

回答

4

從<h3>去除餘量以及

h3 { margin-top: 0 }

DEMO

來源

2012-12-04 11:51:27

+0

唉！我一直在尋找Chrome工具中的html/body元素，我不認爲h3的邊緣會導致這個......噢！ – Phil

+0

你是天才/救生員 – darkbluesun

0

邊距崩潰相互轉化。

的html（0），body（0），#container（0），和h3（不爲0）合併成一個合併的非零頂部的第一內容和所述窗口的邊緣之間餘量上邊距。

設置h3 { margin-top: 0 }將其刪除。

（雖然你應該開始一個標題（h1）不是一個子子標題（h3）您的文檔。）

來源

2012-12-04 11:52:27 Quentin

0

其實Default Margin Of H1 to H6是你面對如此重寫此值將解決你的問題的問題。

h3 { margin-top: 0;margin-bottom: 0; }

來源

2012-12-04 11:57:50

0

額外的信息：

你也可能想看看啓動項目之前，使用一個CSS reset script所以你不必擔心這樣的小事。

來源

2012-12-04 18:29:29

+0

我使用的是使用Normalise.css的HTML5 Boilerplate，我將它排除在示例中以幫助縮小我的問題範圍。 – Phil

相關問題

 相關問題