如何消除 div 上方和下方的间隙？

Question

所以我有一个 div，它位于导航栏下方和另一个 div 上方。我似乎无法消除 div 上下的差距，有什么办法吗？

注意：我已经从 HTML 和 CSS 代码中删除了所有内容和细节，以使其在视觉上更简单。

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>

Answer 1

这是由于collapsing margins

造成的

从第一个标题中删除 margin-top：

.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>

Answer 2

顶部间隙来自 h1，底部间隙来自 p

标题 (h1-h6) 和 p 默认有 margin

所以你需要在其中重置 margin。重置它们后，您可以根据需要调整它们

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>

您可以在 MDN

上查看有关 margin collapsing 的更多信息

如何消除 div 上方和下方的间隙？

How to remove gap above and below my div?

html

css

margin

padding