如何消除我的 div 上方和下方的间隙？ [复制]

Posted

技术标签:

【中文标题】如何消除我的 div 上方和下方的间隙？ [复制]【英文标题】：How to remove gap above and below my div? [duplicate] 【发布时间】：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 是最好的选择 【参考方案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 的更多信息

【讨论】：

以上是关于如何消除我的 div 上方和下方的间隙？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

消除input与父元素指明出现的空隙

当歌曲在 html 音频标签中重播时，如何消除间隙？ [复制]

Android - 如何在使用带有权重的 LinearLayout 时消除不需要的间隙

如何消除页脚和页面内容之间的间隙

隐藏导航栏会导致其下方和上方的空间

如何消除页面顶部的空白？