Question

所以我有一个div在导航栏下方和另一个div之上。我似乎无法消除那个div上方和下方的差距，任何想法怎么做？

注意：我已从HTML和CSS代码中删除了所有内容和详细信息，以使其更直观。

SELECT * FROM dbo.UserAccount

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;
}

Answer 1

最高差距来自h1，最低差距来自p

标题（h1-h6）和p默认为margin

因此您需要在其中重置margin。重置后，您可以根据需要进行调整

＆＃13;

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;
}

＆＃13;

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

＆＃13;

您可以在MDN上看到有关margin collapsing的更多信息

Answer 2

这是由collapsing margins

引起的

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何消除我的div上方和下方的差距？

2 个答案: