0

So I have a div which is below the nav bar and above another div. I can't seem to eliminate the gap above and below that div, any ideas how to do it?

Note: I have stripped all the content and details from the HTML and CSS codes to make it more visually simpler.

body {
  margin: 0;
  padding: 0;
}
nav {
  height: 57px;
  background: black;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.72);
}
nav ul {
  padding: 0;
  margin: 0 auto;
}
nav ul li {
  list-style: none;
  font-family: arial;
  font-size: 15px;
}
nav ul li a {
  text-decoration: none;
  float: left;
  display: block;
  padding: 20px 20px;
  color: white;
  font-weight: bold;
  border-top: solid 3px black;
  margin: 0 0px;
}
body {
  overflow: scroll;
  height: 950px;
  overflow-x: hidden;
}
.servicesContent {
  font-family: arial;
  margin: 0 auto;
}
.upperService {
  width: 70%;
  margin: 0 auto;
  background: white;
  padding: 0 10px;
  box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
  -webkit-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
}
.servicesH1 {
  text-align: center;
}
.contentLists {
  width: 100%;
  text-align: center;
  background-color: grey;
  padding: 25px 0;
  height: 450px;
  margin-top: 0;
}
<body class="serviceBody" id="bodyColour">
  <div class="wrapper">

    <nav>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a id="active" href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </nav>

    <div class="servicesContent">
      <div class="upperService">
        <h1 class="servicesH1">Services</h1>
        <h2>What we do</h2>
        <p>gap gap gap gap gap gap gap gap gap gap gap gapgap gapgap gap gap gap gap gap gapgap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gapgapgapgapgap gap gap gap gap gap gap gap gap gap gap gap.
          <br>gap gap vvikfapfkakfapdofksapdokaspokdsapdkpokdasokdpaskdpoaskfpajf jf afj afjpaf jpoopasj f.
          <br>jhadjk djkh dkjhshd kjsah dkjsah dkjash dkjah dksajhd kjashfkahf kashf kasjfh kjasfh kjasfh kajsfh akf hkajsfhksaf hkasf hkasf haskf hn</p>
        <p>List:</p>
      </div>
      <div class="contentLists">
      </div>
dippas
  • 58,591
  • 15
  • 114
  • 126
Sat10
  • 101
  • 1
  • 3
  • 13

2 Answers2

2

The top gap is from h1 and the bottom gap is from p

Headings (h1-h6) and p have by default margin

so you need to reset margin in them. After reset them you can adjust them to your needs

body,
h1,
p {
  margin: 0
}
nav {
  height: 57px;
  background: black;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.72);
}
nav ul {
  padding: 0;
  margin: 0 auto;
}
nav ul li {
  list-style: none;
  font-family: arial;
  font-size: 15px;
}
nav ul li a {
  text-decoration: none;
  float: left;
  display: block;
  padding: 20px 20px;
  color: white;
  font-weight: bold;
  border-top: solid 3px black;
  margin: 0 0px;
}
body {
  overflow: scroll;
  height: 950px;
  overflow-x: hidden;
}
.servicesContent {
  font-family: arial;
  margin: 0 auto;
}
.upperService {
  width: 70%;
  margin: 0 auto;
  background: white;
  padding: 0 10px;
  box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
  -webkit-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
}
.servicesH1 {
  text-align: center;
}
.contentLists {
  width: 100%;
  text-align: center;
  background-color: grey;
  padding: 25px 0;
  height: 450px;
  margin-top: 0;
}
<body class="serviceBody" id="bodyColour">
  <div class="wrapper">

    <nav>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a id="active" href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </nav>

    <div class="servicesContent">
      <div class="upperService">
        <h1 class="servicesH1">Services</h1>
        <h2>What we do</h2>
        <p>gap gap gap gap gap gap gap gap gap gap gap gapgap gapgap gap gap gap gap gap gapgap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gapgapgapgapgap gap gap gap gap gap gap gap gap gap gap gap.
          <br>gap gap vvikfapfkakfapdofksapdokaspokdsapdkpokdasokdpaskdpoaskfpajf jf afj afjpaf jpoopasj f.
          <br>jhadjk djkh dkjhshd kjsah dkjsah dkjash dkjah dksajhd kjashfkahf kashf kasjfh kjasfh kjasfh kajsfh akf hkajsfhksaf hkasf hkasf haskf hn</p>
        <p>List:</p>
      </div>
      <div class="contentLists">
      </div>

You can see more info about margin collapsing on MDN

dippas
  • 58,591
  • 15
  • 114
  • 126
0

This is caused by collapsing margins

Remove the margin-top from the first heading:

.servicesH1 {
  text-align: center;
  margin-top: 0;
}


body {
  margin: 0;
  padding: 0;
}
nav {
  height: 57px;
  background: black;
  box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.72);
}
nav ul {
  padding: 0;
  margin: 0 auto;
}
nav ul li {
  list-style: none;
  font-family: arial;
  font-size: 15px;
}
nav ul li a {
  text-decoration: none;
  float: left;
  display: block;
  padding: 20px 20px;
  color: white;
  font-weight: bold;
  border-top: solid 3px black;
  margin: 0 0px;
}
body {
  overflow: scroll;
  height: 950px;
  overflow-x: hidden;
}
.servicesContent {
  font-family: arial;
  margin: 0 auto;
}
.upperService {
  width: 70%;
  margin: 0 auto;
  background: white;
  padding: 0 10px;
  box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
  -webkit-box-shadow: 6px 0 4px -5px rgba(0, 0, 0, 0.32), -6px 0 4px -5px rgba(0, 0, 0, 0.32);
}
.servicesH1 {
  text-align: center;
  margin-top: 0;
}
.contentLists {
  width: 100%;
  text-align: center;
  background-color: grey;
  padding: 25px 0;
  height: 450px;
  margin-top: 0;
}
<body class="serviceBody" id="bodyColour">
  <div class="wrapper">

    <nav>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a id="active" href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li><a href="#">Link</a>
        </li>
      </ul>
    </nav>

    <div class="servicesContent">
      <div class="upperService">
        <h1 class="servicesH1">Services</h1>
        <h2>What we do</h2>
        <p>gap gap gap gap gap gap gap gap gap gap gap gapgap gapgap gap gap gap gap gap gapgap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gap gapgapgapgapgap gap gap gap gap gap gap gap gap gap gap gap.
          <br>gap gap vvikfapfkakfapdofksapdokaspokfpajf jf afj afjpaf jpoopasj f.
          <br>jhadjk djkh dkjhshd kjsah dkjsah dkjash dkjah dksajhd kjashfkahf kashf kasjfh kjasfh kjasfh kajsfh akf hkajsfhksaf hkasf hkasf haskf hn</p>
        <p>List:</p>
      </div>
      <div class="contentLists">
      </div>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161