How would I remove space in between vertically stacked divs?

Question

I've tried editing the space in between the div 1 and div 2 but the gap remains(Margins and Padding. I tried editing the properties on parent div but the children divs would either extend beyond the parent. I know I'm probably not looking at the problem correctly. Thanks for the help.

html {
overflow:
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0; /* remove default margin */
  transition-property: background-position;
}

div#container{
  height: 100%;
  margin: 0;
}

div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}

.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}

.navbar{
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;

}

div#static_nav a{
  color: white;
  text-decoration: none;
  padding-right: 20px;
}

div#static_nav a:hover{
  color: #8E8E8E;
}

div#block_one, div#block_two, div#block_three,
div#block_four{
  height: 100vh;
  z-index: 1;
  padding-top: 51px;
  width: 100%;

}

div#block_one{
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
}

div#logo{
  background-image: url(http://www.clker.com/cliparts/C/k/d/o/B/3/white-peace-sign-hi.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  z-index: -1;
}

.heading{
  padding-top: 10px;
  padding-bottom: 20px;
  width: 90%;
  height: 1em;
  border-top: 2px solid #A8A8A8;
  margin: 0 auto;
  font-size: 40px;
  font-family: 'Hind Guntur', sans-serif;
}

div#subhead {
  width: 88.8%;
  margin: 0 auto;
  border-left: 5px solid #D8D8D8;
  text-indent: inherit;
  background-color: blue;
}

div#quote{
  padding-top:;
  padding-bottom:;
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  height: 50%;
  background-color: red;
  margin: 0 auto;
}

div#vis{
margin-left: 20px;
font-family: 'Heebo', sans-serif;
background-color: red;
height: 50%;
}


div#block_five{
  height: 30vh;
  background-color: #F5F5F5;
}

<!DOCTYPE html>

<html lang = "en">
<meta charset = "utf-8" />

<head>
  <link rel = "stylesheet" type = "text/css" href = "tof_css.css" />
  <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200|Hind+Guntur:Regular">

</head>

<body>
  <div id = "container">

    <header>
      <div id = "static_nav">
        <nav class = "navbar">
          <a href = "#block_one">Home</a>
          <a href = "#block_two">About</a>
          <a href = "#block_four">People</a>
          <a href = "#block_five">Contact</a>
          <a href = "">Log In</a>
        </nav>
      </div>
    </header>


  <div id = "block_one">
    <div id = "logo">
    </div>
  </div>

  <div id = "block_two">
    <header class = "heading">
      TEST
    </header>
    <div id = "subhead">
    <div id = "quote">
      <p>Div 1</p>
    </div>
    <div id = "vis">
      <p>Div 2</p>
    </div>
  </div>

  <div id = "block_three">
  </div>

  <div id = "block_four">
  </div>

  <div id = "block_five">
  </div>

</div>
</html>

The `
` inside your `#vis
` had default margin, you need to set `margin:0` — Goombah, Dec 29 '16 at 14:21

Syden · Answer 1 · 2016-12-29T14:30:48.723

Set #subhead p margin: 0;. You have a margin-left: 20px; on #vis pushing it right, either comment it or remove it, added a padding-left: 20px; to align text with div1's but feel free to remove it. In addition to that, you had empty values on #quote paddings which I commented as well.

html {
  overflow:
}
body {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  margin: 0;
  /* remove default margin */
  transition-property: background-position;
}
#subhead p {
  margin: 0;
}
div#container {
  height: 100%;
  margin: 0;
}
div#static_nav {
  width: 100%;
  height: 2em;
  padding-top: 10px;
  position: fixed;
  z-index: 999;
}
.static_nav_full {
  background-color: #3A3D3F;
  transition: background-color 2s;
  opacity: .90;
}
.navbar {
  font-family: 'Source Sans Pro', sans-serif;
  padding-right: 20px;
  background-color: transparent;
  text-align: right;
}
div#static_nav a {
  color: white;
  text-decoration: none;
  padding-right: 20px;
}
div#static_nav a:hover {
  color: #8E8E8E;
}
div#block_one,
div#block_two,
div#block_three,
div#block_four {
  height: 100vh;
  z-index: 1;
  padding-top: 51px;
  width: 100%;
}
div#block_one {
  background-image: url(https://images5.alphacoders.com/439/thumb-1920-439361.jpg);
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background-repeat: no-repeat;
  position: relative;
}
div#logo {
  background-image: url(http://www.clker.com/cliparts/C/k/d/o/B/3/white-peace-sign-hi.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100%;
  z-index: -1;
}
.heading {
  padding-top: 10px;
  padding-bottom: 20px;
  width: 90%;
  height: 1em;
  border-top: 2px solid #A8A8A8;
  margin: 0 auto;
  font-size: 40px;
  font-family: 'Hind Guntur', sans-serif;
}
div#subhead {
  width: 88.8%;
  margin: 0 auto;
  border-left: 5px solid #D8D8D8;
  text-indent: inherit;
  background-color: blue;
}
div#quote {
  /*padding-top: ;
  padding-bottom: ;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  font-size: 18px;
  height: 50%;
  background-color: red;
  margin: 0 auto;
}
div#vis {
  /*margin-left: 20px;*/
  padding-left: 20px;
  font-family: 'Heebo', sans-serif;
  background-color: red;
  height: 50%;
}
div#block_five {
  height: 30vh;
  background-color: #F5F5F5;
}

<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8" />

<head>
  <link rel="stylesheet" type="text/css" href="tof_css.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Kanit|Heebo|Source+Sans+Pro:200|Hind+Guntur:Regular">

</head>

<body>
  <div id="container">

    <header>
      <div id="static_nav">
        <nav class="navbar">
          <a href="#block_one">Home</a>
          <a href="#block_two">About</a>
          <a href="#block_four">People</a>
          <a href="#block_five">Contact</a>
          <a href="">Log In</a>
        </nav>
      </div>
    </header>


    <div id="block_one">
      <div id="logo">
      </div>
    </div>

    <div id="block_two">
      <header class="heading">
        TEST
      </header>
      <div id="subhead">
        <div id="quote">
          <p>Div 1</p>
        </div>
        <div id="vis">
          <p>Div 2</p>
        </div>
      </div>

      <div id="block_three">
      </div>

      <div id="block_four">
      </div>

      <div id="block_five">
      </div>

    </div>

</html>

score 2 · Accepted Answer · answered Dec 29 '16 at 14:24

2

Browser styles define <p> elements as having a top and bottom margin of 1em by default. You simply need a rule to eliminate those default paragraph styles, like so:

#subhead p {
  margin: 0;
}

answered Dec 29 '16 at 14:24

Jon Uleis

17,693
2
33
42

score 1 · Answer 3 · answered Dec 29 '16 at 14:25

1

your p under the #vis has unnecessary margin-top, you should remove that to get rid of the gap

#vis p {
  margin: 0;
}

answered Dec 29 '16 at 14:25

godblessstrawberry

4,556
2
40
58

How would I remove space in between vertically stacked divs?

3 Answers3