Question

我的“DIV：IMAGE”和“DIV：SLIDER”之间有一个很大的“空白区域”，我无法解释。我无法看到我在两个元素之间编了一个边距，无论我对样式表做什么，我都无法将其删除。
代码的哪一部分导致了这个？那里有什么清洁的解决方案？非常感谢。

.wrap {
  margin: 0px auto;
  width: 80%;
  margin-top: 10px;
  padding: 3em 0em;
  position: relative;
  color: #FFF;
}
.image {
  background-image: url("http://www.thestrandnyc.com/d/main/media/Destination/__thumbs_1200_700_crop/NY_City.jpg");
  background-size: 110% 100%;
  padding: 0px 0px 210px 0px;
  border: 1px solid red;
}
.slider {
  padding: 2em 0em;
  background-color: #F4F4F4;
  position: relative;
  height: 200px;
  margin: 0px auto;
  border: 1px solid red;
}
.slider p:first-child {
  color: #fff;
  background: #35AFBA;
  font-size: 2.8em;
  font-weight: 900;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 200px;
  margin: 0em 0em 0em 1.2em;
  position: absolute;
}
.slider p:nth-child(2) {
  color: #ff605f;
  text-shadow: 0px 0px 2px #ff605f;
  background: rgba(230, 231, 231, 0.56);
  font-size: 2.8em;
  font-weight: 900;
  border-radius: 100%;
  width: 200px;
  height: 200px;
  display: inline-block;
  text-align: center;
  line-height: 200px;
  margin: 0em 0em 0em 4.5em;
  position: absolute;
}

<body>

  <div class="image">
    <div class="wrap">
      <div class="nav">

        <h1>Resume</h1>
        <ul>
          <li>Home</li>
          <li>Portfolio</li>
          <li>Skills</li>
          <li>Experience</li>
          <li>Contact</li>
        </ul>

      </div>

      <div class="me">
        <h2>Andrew Hardiman</h2>
        <p>Webdesigner & Developer</p>
        <p>Read More</p>
      </div>

    </div>
  </div>

  <div class="wrap">
    <div class="slider">

      <p>HTML</P>
      <p>css</P>
      <h3>I design and develop amazing websites that are sleek, easy-to-navigate and exiting to use.</h3>
      <p>Work with us to plan your digital marketing mix and achieve better results online.</p>
    </div>
  </div>

Answer 1

div.slider位于div.wrap内，其margin-top和padding。它们会造成差距，删除它们就可以解决这个问题。

Answer 2

你.wrap元素的{3} {3}和padding的10px，请尝试删除这两条css规则，不应再有空格。

Answer 3

http://jsfiddle.net/haxj27mm/1/

.wrap {
   margin: 0px auto;
   width: 80%;
   margin-top: 0px;
   padding: 0em 0em; 
   position: relative; 
   color: #FFF;
}

元素之间不需要的边距 - 无法删除

3 个答案: