HTML - divs之間的空格

Question

我已經從3個div創建了我的網站，但是我的div之間有一個煩人的問題。我有一些我不想要的空間。這是我的網站的標記：

<div id="upbox"> 
    <h1 class="headline1">...</h1> 
    </div> 
     <div id="navig"> 

      <table align="center" cellspacing="0" width="60%" cellpadding="0" dir="ltr"> 
       <tr> 
        <td><a href =url> home </a></td> 
        <td><a href =url> Reviews </a></td> 
        <td><a href =url> Upcoming </a></td> 
        <td><a href =url> Xbox 360 </a></td> 
        <td><a href =url> Xbox One </a></td> 
        <td><a href =url> PS3 </a></td> 
        <td><a href =url> PS4 </a></td> 
        <td><a href =url> PC </a></td> 
        <td><a href =url> Contact Us </a></td> 
       </tr> 
      </table> 

     </div> 
    <hr /> 

    <div id="mainbox"> 
    <br/> 
    <br/> 
    <p class="imgfirst"><img src="Images\characters.jpg" width="70%"></p> 

    </div> 

而且我的CSS是：

#mainbox { 
    width: 1000px; 
    margin:0 auto; 
    background-color: white; 
    border: 2px solid; 
    border-color: #970c0c; 
} 

#upbox { 
    background-color: #1e1e1e; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    clear:none; 
} 

#navig { background-color: #970c0c; } 

我已經試過一切，但它並不能幫助。我能做什麼？

這是我目前的結果。

Answer 1

以下內容添加到您的CSS，因爲有你h1，hr和body元素相關的邊距：

h1 { margin:0; } 
hr { margin:0; } 
body { margin:0; } 

DEMO：http://jsfiddle.net/4gq3b/3/

您可以考慮使用一個Reset CSS樣式表。基本上這是一種通過在應用CSS之前擊敗任何基於瀏覽器的規則和遺漏來保持結果儘可能通用的方法。

此外，我認爲你有一個設置#mainbox { width:1000px; }的原因，它看起來有點奇怪。如果您取出width屬性，則所有divs的寬度將相同。

Answer 2

您還可以調整內部的div塊級元素的邊距：

#upbox h1{ margin: 0; } 

顯然那些你#mainbox有破裂會造成白色空間，以及。

Answer 3

瀏覽器默認應用於網頁的CSS規則，但每個瀏覽器供應商決定實施這些規則的方式略有不同。所以你遇到的是瀏覽器的默認規則。

要覆蓋瀏覽器的這些默認規則並解決您的問題，您可以將此行放在CSS文件的頂部。這將爲這三個要素設置保證金爲0

h1, hr, body { margin: 0 } 

另一種選擇是將包括CSS在你的CSS文件或鏈接到一個頂復位無論是。這裏有一些資源，你可以用它來得到你的CSS的基礎，你可以從那裏建立：CSS復位：http://meyerweb.com/eric/tools/css/reset/index.html和規範CSS：http://necolas.github.io/normalize.css/

現在讓我們來談談語義HTML：

在您的代碼您正在使用一張桌子來保存似乎是導航欄的內容。更好的選擇是在div或nav標籤（html5中提供）中使用無序列表，這將爲將來的驗證提供更大的靈活性。

HTML看起來像這樣。

<div id ="navig"> 
    <ul> 
    <li>Reviews</li> 
    <li>Upcoming</li> 
    <li>Xbox 360</li> 
    </ul> 
</div> 

或：

<nav ="navig"> 
    <ul> 
    <li>Reviews</li> 
    <li>Upcoming</li> 
    <li>Xbox 360</li> 
    </ul> 
    </nav> 

CSS會是這個樣子。

#navig { 
    background-color: #970c0c; 
} 

#navig ul { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 

#navig ul li { 
    display: inline; 
} 

CSS提示：看看你如何寫出四次保證金？它可以按照與頂部，右側，底部，左側相對應的編號進行寫入：margin: 0 0 0 0;。明確涉及浮動元素，所以你也可以放棄。

#upbox { 
    background-color: #1e1e1e; 
    /*four into one*/ 
    margin: 0 0 0 0; 
    clear:none; 
} 

希望這一切都有助於：快樂編碼！