h1爲在元件

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* main elements */ 
div.body { 
    display: block; 
    background-color: Lavender; 
    border: 0px 20px 0px 20px; 
    max-width: 1100px; 
    margin-top: 10px; 
    margin-right:20px; 
    margin-left: 20px; 
    clear: both; 
    padding: 0px 20px 0px 20px; 
} 
body { 
    display: block; 
    background-color: Lavender; 
    border: 10px; 
    max-width:1100px; 
    margin: 0px 280px 0px 10px; 
    clear:both; 
} 
/*Body Divs*/ 
div.bodycontent{ 
    display:block; 
    position:absolute; 
    top: 10px; 
    width: 1075px; 
    height: 470px; 
    background-color: MediumAquaMarine; 
    margin-right:0; 
    margin-left:0px; 
    bottom:10px; 
} 
div.body1 { 
    display: inline-block; 
    background-color: limegreen; 
    position: absolute; 
    top: 10px; 
    width:480px; 
    height:225px; 
    margin-left:10px; 
    padding: 0 10px 0 10px; 
} 
div.body2 { 
    display: inline-block; 
    background-color: Salmon; 
    position: absolute; 
    top: 10px; 
    width:525px; 
    height:225px; 
    margin-left:520px; 
    padding: 0 10px 0 10px; 
} 
div.body3 { 
    display: inline-block; 
    background-color: FireBrick; 
    position: absolute; 
    top: 250px; 
    width:530px; 
    height:205px; 
    margin-left:10px; 
    padding: 0 10px 0 10px; 
} 
div.body4 { 
    display: inline-block; 
    background-color: SeaGreen; 
    position: absolute; 
    top: 250px; 
    width:475px; 
    height:205px; 
    margin-left:570px; 
    padding: 0 10px 0 10px; 
} 

/*-----------------------------------------------------------------------*/ 

header { 
    background-color: Lavender; 
} 
/*header divs*/ 
div.header { 
    display:block; 
    position:absolute; 
    width: 1075px; 
    height:150px; 
    top:490px; 
    background-color: PaleGoldenRod; 
    margin-right:0; 
    margin-left: 0px; 
} 
div.backinfo { 
    display:inline-block; 
    background-color: lightblue; 
    position: absolute; 
    top:80px; 
    width:455px; 
    padding:10px 10px 10px 10px; 
    height:40px; 
    margin-right:900px; 
    margin-left:10px; 
} 
div.digitalbay { 
    display: inline-block; 
    background-color: coral; 
    position: absolute; 
    width:455px; 
    height:60px; 
    top:20px; 
    margin-top:-10px; 
    margin-right:560px; 
    margin-left:180px; 
    padding: 0 10px 0 10px; 
    } 
div.nav { 
    display: inline-block; 
    position: absolute; 
    background-color: lightblue; 
    top:10px; 
    margin-right:0px; 
    margin-left:665px; 
    padding: 10px 0px 10px 0px; 
    height:110px; 
    width:395px; 
} 
div.contact { 
    display: inline-block; 
    background-color: Chocolate; 
    position: absolute; 
    top: 100px; 
    width:300px; 
    height:45px; 
    margin-right:550px; 
    margin-left:190px; 
    padding: 0 10px 0 10px; 
} 
div.contact2 { 
    display: inline-block; 
    background-color: DeepPink; 
    position: absolute; 
    top: 100px; 
    width:130px; 
    height:45px; 
    margin-right:550px; 
    margin-left:515px; 
    padding: 0 10px 0 10px; 
} 
</style> 
</head> 
<div class="bodydiv"> 
    <header> 
     <div class="header"> 
      <div class="backinfo"> 
      </div> 
      <div class="digitalbay"> 
       <h1>Digital Bay</h1> 
      </div> 
      <div class="nav"> 
      </div> 
    </header> 
    <body> 
     <div class="bodycontent"> 
      <div class="body1"> 
      </div> 
      <div class="body2"> 
      </div> 
      <div class="body3"> 
      </div> 
      <div class="body4"> 
      </div> 
     </div> 
    </body> 
</div> 
<aside> 
    <div class="extrainfo"> 
    </div> 
    <div class="slideshow"> 
    </div> 
</aside> 
<footer> 
    <div class="footer"> 
    </div> 
</footer> 
</html>

在上面的元素，其中在編譯時我的<div class=digitalbay>元件位於過低，在編譯時嵌套在div的<h1>元件是在元件太低。我想知道是否有辦法讓它高出div。我已經嘗試過改變邊距，但是它會沿着頁面移動div，這沒有幫助。h1爲在元件

來源

2016-03-19 TheBigFootsDad

爲什麼你有3個層次的嵌套：在div div內的div？只有一行內容？ –

您是否使用重置css樣式表？如果沒有，您可以將h1頁邊距重置爲0 –

在h1上設置保證金，它將向上移動。例如：

h1 { 
    margin-top: 0.25em; 
}

來源

2016-03-19 13:52:28 Jasha

您的.header div有top: 490px。這就是爲什麼它如此之低。

在其他方面，這裏有一些關於你的CSS和HTML的反饋。

切勿將<body>標籤的<div>裏面......它總是應該是<head>標籤之後。當瀏覽器解析HTML時，它會自動爲你修正，但如果你開始期待你的身體標記現在處於什麼位置，你將會有錯誤。
不要編寫你的CSS如下div.className。相反，只需使用不帶元素的類名稱：.className。這會降低特異性，並隨着其增長而更容易維護。它也會顯着減少你的打字。
我不知道你的目標到底是以這個頁面爲準，但是在任何地方都不要使用position: absolute。改爲使用position: relative。
在HTML中，有一個標籤叫做<main>。每頁只能有一個，我用它代替<div class="bodydiv">。
您正在使用<header>和<footer>，並把一個<div>它裏面有一類頁眉和頁腳的......卸下，直接把你的類上<header>和<footer>標籤。
在<div class="bodycontent">的內部，您可以使用<section>標記代替DIV（如果它在語義上正確的話）。

來源

2016-03-19 13:56:52 justinledouxweb

回答

相關問題