CSS unwanted white space

Question

So I was creating a page and put an 'h1' tag inside of a full height 'div' tag. Now when I went to add a bit of 'margin-top' to the h1 for some reason it created a white space where the background color should be. Please help. What could be causing this? Here is my code:

body {
    margin:0;
    padding:0;
    font-family: 'Open Sans', sans-serif;
}           
#first-div{
    height:100vh;
    width:100%;
    background-color:#E0EBE8;
}
#nav-bar {
    background-color:#E0EBE8;
    height:58px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
}
.menu-link {
    float:right;
    text-decoration:none;
    color:#008080;
    font-size:115%;
    margin-top:20px;
    margin-right:107px;
}
.menu-link2 {
    float:right;
    text-decoration:none;
    color:#008080;
    font-size:115%;
    margin-top:20px;
    margin-right:52px;
}
#second-div {
    height:100vh;
}
h1 {
    margin-top:100px;
}

<div id="first-div">
    <div id="nav-bar">
        <a href="#" class="menu-link2">Contact</a>
        <a href="#" class="menu-link">Work</a>
        <a href="#" class="menu-link">About</a>
    </div>
    <h1>This is my heading</h1>
</div>
<div id="second-div">
</div>

Aniket G · Answer 1 · 2018-12-10T00:57:49.433

You have the h1's margin-top at 100px, which pushes it down 100 px from the top of the screen. The nav-bar's height is only 58 px, which leaves 42 px of room in between, which is the white space you don't want. Either change the nav-bar's height to 100px, or change the h1's margin-top to 58px.

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

#first-div {
  height: 100vh;
  width: 100%;
  background-color: #E0EBE8;
}

#nav-bar {
  background-color: #E0EBE8;
  height: 58px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.menu-link {
  float: right;
  text-decoration: none;
  color: #008080;
  font-size: 115%;
  margin-top: 20px;
  margin-right: 107px;
}

.menu-link2 {
  float: right;
  text-decoration: none;
  color: #008080;
  font-size: 115%;
  margin-top: 20px;
  margin-right: 52px;
}

#second-div {
  height: 100vh;
}

h1 {
  padding-top: 100px;
}

<div id="first-div">
  <div id="nav-bar"> <a href="#" class="menu-link2">Contact</a> <a href="#" class="menu-link">Work</a> <a href="#" class="menu-link">About</a> </div>
  <h1>This is my heading</h1>
</div>
<div id="second-div"> </div>

I'm sorry but this would mean that the h1 can't be any further down the page than the nav bar. Why is the white space even being created in the first place? It should create space of the color of the background — AccreditedPsych, Dec 10 '18 at 00:51
There I edited the code.Use padding-top instead of margin-top. Now the h1 can be as far down as you'd like and still would create a space the color of the background. I'm not sure why your code wouldn't work, but the new code is the same as what you want. — Aniket G, Dec 10 '18 at 00:58

CSS unwanted white space

1 Answers1