【问题标题】:How to remove gap above and below my div? [duplicate]如何消除我的 div 上方和下方的间隙? [复制]
【发布时间】:2016-12-08 05:24:08
【问题描述】:

所以我有一个位于导航栏下方和另一个 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>

【问题讨论】:

  • 我认为 overflow:hidden 是最好的选择

标签: html css margin padding


【解决方案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>

【讨论】:

    【解决方案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 的更多信息

    【讨论】:

      猜你喜欢
      • 2019-05-27
      • 2018-01-05
      • 1970-01-01
      • 1970-01-01
      • 2018-11-03
      • 2023-04-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多