Jakob Jakob - 2 months ago 16
HTML Question

H1 makes space/gap between header and top of page

I have a problem where my h1 tags gets seperated from the top of my page - like this: enter image description here

I'm still very new to HTML & CSS, so I'm asking for your help. Also, I DID look around to see other posts about this and I've tried ALOT, but i can't seem to get it to work.

Here is my CSS & HTML:



html {
height: 100%;
width: 100%;
}

body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.header{
background: url("../images/artboard1.jpg") no-repeat top center fixed;
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}

#logo {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
float: left;
padding-left: 40px;
padding-top: 35px;
margin: 0;
}

nav {
float: right;
padding-top: 40px;
padding-right: 40px;
margin: 0;
}
a {
color: #ffffff;
font-weight: 400;
font-size: 80%;
text-decoration: none;
margin: 0 auto;
padding-left: 3rem;
}

.content_top {
margin: 0;
margin-top: 260px;
padding: 4rem 0 8rem 0; }
.sub_title, .under_title {
color: #ffffff;
text-align: center;
}

.sub_title {
font-weight: 400;
font-size: 0.85rem;
padding: 0 0 5px 0;
margin: 0;
}

.logo_middle {
display: block;
margin: 0 auto;
}

.under_title {
font-weight: 400;
font-size: 0.85rem;
padding: 5px 0 5px 0;
margin: 0;
}

.content {
background: url(../images/Untitled-2.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #0D0E12;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.projekter {
background-color: #0D0E12;
margin: 0 auto;
padding 0 auto;
}

<html>
<head>
<title>Jakob Hoeg</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>

<body>

<div class="header">
<header>
<a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
<nav>
<a href="#">HJEM</a>
<a href="#">PORTFOLIO</a>
<a href="#">KONTAKT</a>
</nav>

<div class="content_top">
<h4 class="sub_title">HEY, MIT NAVN ER</h4>
<img class="logo_middle" src="images/logo_big.png" draggable="false"/>
<h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4>
</div>
</header>

</div>

<section class="content">
<div id="content_cont">
<h1>Hello</h1>
</div>
</section>

<section class="projekter">
<div id="projekter">
<h1>Hello</h1>
</div>
</section>

</body>
</html>




Answer

Heh, it's a very interesting effect - "margin collapsing". h1 has default margin-top.

Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

To solve this problem add padding-top to container or replace header margin-top with padding-top. Also can set h1 margin-top to 0.

You can read more about it here.

Comments