爲什麼我的CSS元素不與網頁頂部對齊？

出於某種原因，我在示例圖像中的元素將不會與頁面的頂部對齊。我有一段時間沒有使用HTML/CSS，但是我看不到任何編碼方式會將矩形向下移動〜5px。 enter image description here 爲什麼我的CSS元素不與網頁頂部對齊？

我想實現這個頁面上的酒吧：http://gradients.glrzad.com/

這裏是我的代碼。 HTML：

<!DOCTYPE "html"> 
<html> 
<head> 
<title>Mobile Site</title> 
<link href="mobileCSS.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="titleBar"> 
<strong>Coles Web</strong> 
</div> 
<div id="container"> 



</div> 
</body> 
</html>

CSS：

@charset "utf-8"; 
/* CSS Document */ 

body{ 
    background-color:#666; 
} 
#container{ 
    width:auto; 

} 

#titleBar{ 
    position:fixed; 
    position:relative; 
    width:auto; 
    height:15px; 
    text-align:left; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:small; 
    color:#00FFFF; 
    background-color:#000; 
    box-shadow:0 3px 5px #333333; 
    border-bottom-left-radius:3px; 
    border-bottom-right-radius:3px; 
} 


.bubble{ 
    width:auto; 
    height: 40px; 
    position:relative; 
    border-spacing: 3px; 
    background-color:#0FF; 
    border-radius:3px; 
    font-family:Impact, Verdana, Geneva, sans-serif; 
    text-align:center; 

}

提前感謝！

來源

2013-02-03 Cole

將主體上的填充和邊距設置爲零。更好的是，使用CSS重置。 – j08691

填充和邊距現在爲零，像魅力一樣工作。謝謝j08691！ – Cole

body{ 
    background-color:#666; 
    padding: 0; 
    margin:0; 
}

來源

2013-02-03 03:13:02

以下內容添加到#titlebar：

top:0; 
left:0;

而且，你只能有一個位置。相對的或固定的。

來源

2013-02-03 05:21:01 robopenguin

爲什麼我的CSS元素不與網頁頂部對齊？

回答

相關問題