图片和标题之间不需要的空间

问题描述

图像（有边框）和下面的分隔线之间有一些空间。图片的ID为varImg，并且它与＃div2之间存在空格。我在图像和分割上都设置了边距和填充，但是没有用。我真的很感谢一个答案。

这是我的代码：

#first {
  background-image: url('themaogate.jpg');
  background-repeat: no-repeat;
  background-size: 105%;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

div {
  margin: 0;
  padding: 0;
}

#div1 {
  background-color: white;
  margin: 0;
  padding: 0;
}

#varImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-color: black;
  border-width: 0 1.5in .5in 1.5in;
  margin: 0;
  padding: 0;
}

jpg {
  line-height: 0px;
  height: 100%;
}

#div1 {
  background-color: black;
}

#div2 {
  text-align: right;
  margin: 0;
}

<div id="div1">
  <nav id="nav2" class="centeralign">
    <ul id="ul1">
      <p>We offer a variety of services including:</p>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Soccer</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Table Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#'">Tabata,Aerobics,Zumba,Workouts and Dance</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Events and Team building</button></li>
    </ul>
  </nav>
  <img id="varImg" src="">
</div>
<div id="div2">
  <h1>Welcome to The #!</h1>
  <img id="img1" src="#.jpg">
  <p>###</p>
</div>

解决方法

您h1内的#div2仍然有较高的利润。将其设置为零应该可以解决该问题：

#div2 h1 {
  margin-top: 0;
}

#first {
  background-image: url('themaogate.jpg');
  background-repeat: no-repeat;
  background-size: 105%;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}



div {
  margin: 0;
  padding: 0;
}

#div1 {
  background-color: white;
  margin: 0;
  padding: 0;
}

#varImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-color: black;
  border-width: 0 1.5in .5in 1.5in;
  margin: 0;
  padding: 0;
}

jpg {
  line-height: 0px;
  height: 100%;
}

#div1 {
  background-color: black;
}

#div2 {
  text-align: right;
  margin: 0;
}

<div id="div1">
  <nav id="nav2" class="centerAlign">
    <ul id="ul1">
      <p>We offer a variety of services including:</p>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Soccer</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Table Tennis</button></li>
      <li><button onclick="document.getElementById('varImg').src='#'">Tabata,Aerobics,Zumba,Workouts and Dance</button></li>
      <li><button onclick="document.getElementById('varImg').src='#.jpg'">Events and Team building</button></li>
    </ul>
  </nav>
  <img id="varImg" src="">
</div>
<div id="div2">
  <h1>Welcome to The #!</h1>
  <img id="img1" src="#.jpg">
  <p>###</p>
</div>