Question

我正在尝试为个人简历网站构建标头，并且由于某些原因使用标题标记<h2></h2> <h3></h3>向下移动父div .header。当我尝试使用margin-top移动标题时，它只会再次移动整个div。我正在使用normalize.css（尝试删除但没有任何更改）以及我选择的谷歌字体。否则所有代码都会在下面的小提琴中发布。有人可以解释为什么会发生这种情况以及如何解决这个问题？感谢。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Miha Šušteršič</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700&subset=latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            <div class="header">
                <h2> Miha Šušteršič </h2>
                <h3> Web Developer </h3>
            </div>
        </header>
        <section id="menu">
        </section>
        <section id="skills">
        </section>
        <section id="porfolio">
        </section>
        <footer>            
        </footer>
    </body>
</html>

的CSS：

/********************************************
SPLOŠNO
********************************************/

body {
    font-family: 'Ubuntu', sans-serif;
    line-height: 120%;
    margin: 0;
}



/********************************************
HEADER
********************************************/

.header {
    width: 100%;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.4)
            ),
        url("../images/header.jpg");
    background-repeat: no-repeat;
}
.header h2 {
    color: #ffffff;
    font-size: 3em;
}
.header h3 {
    color: #eaf1fb;
}


/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 480px) {
    body {
        background-color: lightblue;
    }
}

使用标题标签向下移动div

0 个答案: