DIV頂部的額外空間

Question

在我提出自己的問題之前，我花了一些時間查看所有其他類似問題，但是他們要麼沒有解決我的問題，要麼我承認我並不完全理解他們。

我有一個div堆放在另一個div的內部，而前div在頂部有一些空間，我不能在我的生活中擺脫掉。我把填充，邊距搞亂了，都刪除了，但仍然存在。以下是CSS & HTML。問題div是mpcontent。這裏是一個問題的圖片以及：http://i44.tinypic.com/34i4hw7.png

在此先感謝！

.mpfade { 
    position: relative:; 
    width: 250px; 
    height: 450px; 
    moz-transition: all 0.2s ease-in-out; 
    -webkit-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    opacity: 0.0; 
    margin-top:-450px; 
    margin-bottom: 100px; 
} 
.mpfade:hover { 
    width: 250px; 
    height: 450px; 
    opacity: 0.95; 
} 
.mpb { 
    width: 200px; 
    height: 5px; 
    background-color: transparent; 
    border-top: 1px solid #FE9D04; 
    border-bottom: 1px solid #FE9D04; 
    margin-top: -8px; 
    margin-bottom: 50px; 
    margin-right: auto; 
    margin-left: auto; 
} 
.mpbg { 
    width: 250px; 
    height: 450px; 
    background-image:url(http://i42.tinypic.com/35hn6g2.jpg); 
} 
.mptain { 
    overflow:hidden; 
    position: relative; 
    top: -68px; 
    width: 200px; 
    height: 84.9%; 
    background-color:#fff; 
    margin-left: auto; 
    margin-right: auto; 
} 
.mptitle { 
    margin-top: 10px; 
    width:250px; 
    background-color: #000; 
    padding: 10px; 
} 
.postcount { 
    position: relative; 
    top: 0px; 
    padding-top: 10px; 
    color:#FE9D04; 
    font-family: flamenco; 
    font-weight: 300; 
    font-size: 30px; 
    text-transform: uppercase; 
    font-style:italic; 
    letter-spacing: 5px; 
    text-align: center; 
} 
.mpalias { 
    padding-top: 10px; 
    color:#FE9D04; 
    font-family: flamenco; 
    font-weight: 300; 
    font-size: 30px; 
    text-transform: uppercase; 
    font-style:italic; 
    letter-spacing: -2px; 
} 
.istuff { 
    font-family: calibri; 
    font-size: 9px; 
    color: #000; 
    border-bottom: 1px solid #fe9d04; 
    text-transform: uppercase; 
    text-align: left; 
    letter-spacing: 5px; 
    margin-right: 8px; 
    font-weight: bold; 
    font-style: italic; 
} 
.ilink { 
    border-radius: 50%; 
    background-color: #fe9d04; 
    width: 45px; 
    height: 45px; 
    line-height: 16px; 
    text-align: center; 
    padding: 5px; 
    font-family: flamenco; 
    font-weight: 300; 
    font-size: 15px; 
    font-weight: 300; 
    text-transform: uppercase; 
    font-style:italic; 
    opacity: 0.6; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.ilink:hover { 
    -webkit-opacity: 1; 
    -moz-opacity: 1; 
    opacity: 1; 
} 
.mpcontent { 
    background-color: #dedede; 
    margin-left: auto; 
    margin-right: auto; 
    width: 180px; 
    height: 450px; 
    letter-spacing: 2px; 
    text-align: left; 
    color: #000; 
    font-family: calibri; 
    font-size: 8px; 
    padding: 0px; 
} 
.mptext { 
    padding-top: 5px; 
    letter-spacing: 2px; 
    text-align: left; 
    color: #000; 
    font-family: calibri; 
    font-size: 8px; 
    font-weight: bold; 
} 

---

<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;"> 
    <img src=""> 
</div> 
<div class="mpfade"> 
    <div class="mpbg"> 
     <div class="mpb"></div> 
     <div class="mptain"> 
      <div class=postcount>0</div> 
      <div class="mpcontent"> 
       <table width="180px;"> 
        <tr> 
         <td colspan="2" style="vertical-align: top" ;> 
          <div class="istuff">text</div> 
         </td> 
        </tr> 
        <tr> 
         <td style="vertical-align: top" ; "><div class=istuff>text</div></td> 
<td style="vertical-align: top ";"> 
          <div class=istuff>text</div> 
         </td> 
        </tr> 
        <tr> 
         <td>text</td> 
         <td>text</td> 
        </tr> 
        <tr> 
         <td style="vertical-align: top; padding-top: 5px"> 
          <div class=istuff>text</div> 
         </td> 
         <td style="vertical-align: top; padding-top: 5px"> 
          <div class=istuff>text/clan</div> 
         </td> 
        </tr> 
        <tr> 
         <td>text</td> 
         <td>text</td> 
        </tr> 
        <tr> 
         <td colspan="2" style="padding-top: 10px"> 
          <div class="istuff">text</div> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2">text</td> 
        </tr> 
        <tr> 
         <td colspan="2" style="padding-top: 10px"> 
          <div class="istuff">text</div> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="2">text</td> 
        </tr> 
        <tr> 
         <td style="vertical-align: top; padding-top: 10px"> 
          <center> 
           <div class=ilink><a href=""> 
text</a> 
           </div> 
          </center> 
         </td> 
         <td style="vertical-align: top; padding-top: 10px"> 
          <center> 
           <div class=ilink><a href=""> 
text</a> 
           </div> 
          </center> 
         </td> 
        </tr> 
       </table> 
       <p> 
        <p> 
         <div class=mpalias>text</div> 
         <p> 
          <div class=mptext>is 
           <!-- |status| --> 
          </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

瀏覽器默認添加樣式。

寫：

body,html{margin:0;} 

最好是通過寫作來重置樣式：

*{margin:0;padding:0;} 

​​

Answer 2

您還沒有格式化的頁面本身。

儘管您的代碼處理了div元素的樣式，但您沒有設計body或html標籤的樣式。它們是div元素所在的包含元素。

html, body { margin: 0; } 

Answer 3

默認情況下，頁邊距具有不同的值，具體取決於您使用的瀏覽器。因此，要在不同瀏覽器之間執行相同的操作，您可以將margin的值重置爲0px。正如你可以在上面的例子中看到：

html, body { 
    margin: 0px; 
} 

而且有你的白度和灰色框之間的空間更新您的代碼：

.mptain { 
    top: -45px; 
} 

而不是

.mptain { 
    top: -68px; 
} 

而不是：

要查看示例工作檢查this JSFiddle。

您可以有更多關於margin如何工作的信息here。

你也可以使用CSS修改器，那些可以找到here。

Answer 4

這已經得到了回答，但我想說明如何修正代碼。

有許多事情會影響您的網頁顯示方式。如果您的代碼沒有正確驗證，某些瀏覽器將無法正確渲染它，並將使用不同格式呈現它：http://validator.w3.org/

您的代碼中有幾個錯誤可以輕鬆查看。

   </table> 
       <p> 
        <p> 
         <div class=mpalias>text</div> 
         <p> 
          <div class=mptext>is 
           <!-- |status| --> 
          </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

後： 是

你錯過了三款標籤。它應該看起來像這樣（技術上我不認爲你應該使用三個段落標籤，只要一個就足夠了）。

   </table> 
       <p> 
        <p> 
         <div class=mpalias>text</div> 
         <p> 
          <div class=mptext>is 
           <!-- |status| --> 
          </div> 
         </p> 
        </p> 
       </p> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

這些樣式屬性搞砸：

 <div class="mpcontent"> 
      <table width="180px;"> 
       <tr> 
        <td colspan="2" style="vertical-align: top" ;> 
         <div class="istuff">text</div> 
        </td> 
       </tr> 
       <tr> 
        <td style="vertical-align: top" ; "><div class=istuff>text</div></td> 

文本

它應該是：

<td style="vertical-align: top;"> 

此外，你應該總是在引號包裹你的屬性：

<div class="istuff"> 

從技術上講，如果有中沒有任何特殊字符，它會驗證...但它很容易忘記他們，雖然我沒有測試它的驗證可能會在你扔一個警告反正。將所有屬性包含在引號中總是更簡單，更高效。

這裏有W3學校的一篇文章吧：http://www.w3schools.com/html/html_attributes.asp

我也建議將您的所有內嵌樣式：

<div style="width:200px; height: 400px; background-image:url(http://i42.tinypic.com/35hn6g2.jpg); padding: 25px;"> 

要你的樣式表。它更容易從樣式表中維護樣式;如果它們是內聯的，則必須始終不斷地編輯HTML代碼。如果它們在單獨的樣式表中，則只需在某些情況下編輯HTML即可，如果需要進行重大更改。

在調用其他CSS樣式之前使用reset.css文件也是一個好主意。我認爲Eric Meyer的CSS解決方案是最全面的：http://meyerweb.com/eric/tools/css/reset/

不同的瀏覽器以不同的方式顯示您的網站，因此reset.css有助於將所有基本樣式重置爲一個特定設置，因此它將顯示相同的內容所有瀏覽器。它會依據瀏覽器而略有不同，但不會差一點。