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.