div之間的空白-沒有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-Tag有余量！

 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 2

來自用戶代理樣式表，包含默認邊距

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 3

導致此的兩件事：

1. 用戶代理樣式表包含一些基本樣式，例如，使h1大。 碰巧的是， h1也有余量。
2. 邊距折疊允許h1的邊距擴展到包含div ，因為這些div沒有填充或邊框。

因此，即使未明確設置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邊距和填充，div之間的空白

因此，您需要在CSS或HTML中為H1設置d邊距和填充

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>