divs之間的空白空間 - 沒有css

Question

任何人都可以向我解釋爲什麼前兩個div之間有空白，以及如何消除它？我看着開發工具，它不是一個邊緣或填充，它只是簡單的白色空間...

謝謝！

<div id="top-bar"> 
 
     BBC Navigation bar 
 
    </div> 
 

 
    <div class="content"> 
 
      <div class="red-bar"> 
 
       <div class="news-title"> 
 
       <h1>NEWS</h1> 
 
       </div> 
 
      </div> 
 

 
</div>

Answer 1

這是從你的用戶代理樣式表， 包含預設保證金

h1 { 
    display: block; 
    font-size: 2em; 
    -webkit-margin-before: 0.67em; 
    -webkit-margin-after: 0.67em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    font-weight: bold; 
} 

要解決這個問題：

h1 
{ 
    margin: 0; 
} 

Answer 2

好了，H1-標籤具有裕度！

h1 { 
 
margin: 0px; 
 
}

<div id="top-bar"> 
 
      BBC Navigation bar 
 
     </div> 
 

 
     <div class="content"> 
 
       <div class="red-bar"> 
 
        <div class="news-title"> 
 
        <h1>NEWS</h1> 
 
        </div> 
 
       </div> 
 

 
    </div>

Answer 3

這裏有兩件事情引起這個：

1. 用戶代理樣式表包含一些基本樣式，例如，使得h1很大。碰巧，h1也被給予了保證金。
2. 保證金崩潰允許h1的保證金擴展到包含div之外，因爲這些div s沒有填充或邊框。

因此，即使它們沒有明確的樣式，你也會在div之間看到空格。

Answer 4

如果您在默認的HTML樣式表檢查出W3的 「信息不規範」 附錄你會看到如何將這些值定義爲：

https://www.quora.com/Why-do-the-default-margins-on-HTML-headers-increase-from-h1-to-h6

<div id="top-bar"> 
 
     BBC Navigation bar 
 
    </div> 
 

 
    <div class="content"> 
 
      <div class="red-bar"> 
 
       <div class="news-title"> 
 
       NEWS 
 
       </div> 
 
      </div> 
 

 
</div>

Answer 5

由於默認H1邊距和麪板之間的白色空間丁

所以，你所要做的就是設置H1 d邊距和填充在你的CSS或你的HTML中

CSS

h1 { 
padding:0; 
margin:0; 

}

或

<div id="top-bar"> 
 
     BBC Navigation bar 
 
    </div> 
 

 
    <div class="content"> 
 
      <div class="red-bar"> 
 
       <div class="news-title"> 
 
       <h1 style="padding:0; margin:0;">NEWS</h1> 
 
       </div> 
 
      </div> 
 

 
</div>