h1元素太低
[英]h1 is too low in the element
問題描述
<!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沿頁面向上移動，這無濟於事。
2 個解決方案
解決方案1
0 已采納 2016-03-19 13:52:28
在h1上設置邊距，它將向上移動。 例：
h1 {
margin-top: 0.25em;
}
解決方案2
0 2016-03-19 13:56:52
您的.header div top: 490px 。 這就是為什么它這么低。
另一方面，這是關於CSS和HTML的一些反饋。
- 切勿將
<body>標記放在<div>...應該總是在<head>標記之后。 當瀏覽器解析HTML時，它會自動為您更正此錯誤，但是如果您開始期望body標簽在現在的位置，則會出現錯誤。 - 不要按照
div.className編寫CSS。 相反，只需使用不包含元素的類名稱：.className。 這將降低特異性，並使其易於維護。 它還將大大減少您的打字。 - 我不知道本頁的最終目標是什么，但不使用
position: absolute可能更容易position: absolute在任何地方都使用position: absolute。 使用position: relative代替。 - 在HTML中，有一個名為
<main>的標記。 每頁只能有一個，我用它代替您的<div class="bodydiv">。 - 您正在使用
<header>和<footer>並在其中放置一個<div>以及一個header和footer類。將其刪除，然后將您的類直接放在<header>和<footer>標記上。 - 在您的
<div class="bodycontent">，您可以使用<section>標記代替DIV（如果您的情況在語義上是正確的）。
替代h1元素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.