要修复它：

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有余量！

＆＃13;

h1 {
margin: 0px;
}

＆＃13;

<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>

＆＃13;

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

以下是导致这种情况的两件事：

用户代理样式表包含一些基本样式，例如，使h1变大。碰巧的是，h1也被给予了保证金。
边距折叠允许h1的边距延伸到包含div之外，因为那些div没有填充或边框。< / LI>
因此，您会在div之间看到空格，即使它们没有明确地设置样式。

Answer 4

如果您查看了W3＆＃34;信息性非规范性＆＃34;默认HTML样式表上的附录，您将看到如何定义这些值：

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

＆＃13;

<div id="top-bar">
       BBC Navigation bar
     </div>

     <div class="content">
          <div class="red-bar">
                <div class="news-title">
                NEWS
                </div>
          </div>

</div>

＆＃13;

Answer 5

由于默认的H1 Margin和Padding

，div之间的空白区域

所以你需要做的是在你的CSS或你的html中设置H1的边距和填充

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>

div之间的空白区域 - 没有css

5 个答案:

要修复它：