Question

<!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，这无济于事。

Answer 1

在h1上设置一个保证金，它会向上移动。示例：

h1 {
  margin-top: 0.25em;
}

Answer 2

您的.header div有一个top: 490px。这就是为什么它如此之低。

另外请注意，这里有一些关于CSS和HTML的反馈。

永远不要将<body>标记放在<div>内......它总是应该在<head>标记之后。当浏览器解析HTML时，它会自动为你纠正，但是如果你开始期待你的身体标签就在现在的位置，你就会有错误。
请勿按照div.className编写CSS。相反，只需使用不带元素的类名：.className。这将降低特异性并使其随着生长而更容易维护。它还会大大减少您的输入。
我不知道最终这个页面的目标是什么，但在任何地方都不能使用position: absolute可能更容易。请改用position: relative。
在HTML中，有一个名为<main>的标记。每页只能有一个，我使用它代替您的<div class="bodydiv">。
您正在使用<header>和<footer>并在其中添加<div>一类页眉和页脚...删除它并将您的班级直接放在{{1}上}和<header>标记。
在<footer>内，您可以使用<div class="bodycontent">标记而不是DIV（如果在您的情况下语义正确）。

h1元素太低了

2 个答案: