元素之間不需要的邊距 - 無法移除

我的'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>

來源

2015-06-18 case_2501

我想DIV＃滑塊是DIV＃圖像裏面，但這種結果並非如此。如果您的縮進是正確的話，調試會更容易。 – GolezTrol

div.slider是內部div.wrap，其具有margin-top和padding。他們造成了差距，而將他們移除將解決這個問題。

來源

2015-06-18 17:08:52 GolezTrol

這工作，謝謝。 –

您.wrap元素的padding of 3em和margin-top的10px，請嘗試刪除這些2 css規則，應該沒有更多的空白。

來源

2015-06-18 17:12:17

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

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

來源

2015-06-18 17:12:50

元素之間不需要的邊距 - 無法移除

回答

相關問題