gap between a div and the top of the screen

Question

I am having a problem with a gap between the div "name" and the top of the screen. I've done some research and all I can find is margin which I have already set and position: absolute; that messes up with the position of the div.The gap wasn't here earlier and I don't know what I did to make it appear.

Here's my code:

body {
  background-image: url("./console.png");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 50px;
  font-family: Brush Script MT;
  text-align: center;
  color: white;
  background-color: black;
}

<div class="name">
  <h1> Clovis Sargenton Callard </h1>
</div>

The `h1` inside `name` probably has some margin associated with it. Try setting that to 0. eg `h1 { margin: 0; }` — Michael Hancock, Oct 10 '17 at 15:20

score 2 · Accepted Answer · answered Oct 10 '17 at 15:22

2

This is caused by collapsing margins

Remove the top margin on your h1 to create the effect you want.

body {
  background-image: url("./console.png");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 50px;
  font-family: Brush Script MT;
  text-align: center;
  color: white;
  background-color: black;
}

h1 {
  margin-top: 0;
}

<div class="name">
  <h1> Clovis Sargenton Callard </h1>
</div>

answered Oct 10 '17 at 15:22

sol

22,311
6
42
59

thank you it worked – Clément Colin Oct 10 '17 at 16:33

score 0 · Answer 2 · answered Oct 10 '17 at 15:21

Set margin: 0 on your h1 element.

body {
  background-image: url("./console.png");
  background-size: cover;
  margin: 0;
  padding: 0;
}

.name {
  font-size: 50px;
  font-family: Brush Script MT;
  text-align: center;
  color: white;
  background-color: black;
}

h1 {
  margin:0;
}

<div class="name">
  <h1> Clovis Sargenton Callard </h1>
</div>

gap between a div and the top of the screen

2 Answers2