javascript - 如何摆脱连续 <header> 和 之间的差距

Question

JSFiddle here.

我有一个 HTML 页面，其中正文由 <header> 组成元素后跟 <main>元素。问题是 <header> 之间存在间隙/空水平空间。和 <main>元素，既不是任何 padding也没有任何 margin .

我需要摆脱这个差距。我该怎么做？

body {
  background-color: black
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

<header class="light-blue darken-4">

  <div class="row section">
    <div class="col s12">
      <a href="#" class="button-collapse  grey-text text-lighten-2" data-activates="side-drawer-container"><i class="material-icons">menu</i></a>
      <span class="container">
                    <a href="#" class="brand-logo grey-text text-lighten-2"> Logo</a>
            </span>
    </div>
    <!-- .col -->
  </div>
  <!-- .row -->


  <ul id="side-drawer-container" class="side-nav ">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">JavaScript</a></li>
  </ul>


  <div class="row">
    <div class="col s12">
      <ul class="tabs tabs-transparent center">
        <li class="tab"><a href="#all">All</a></li>
        <li class="tab"><a href="#One" class="active">ONE</a></li>
        <li class="tab"><a href="#Two">TWO</a></li>
        <li class="tab"><a href="#Three">THREE</a></li>
      </ul>
    </div>
  </div>


</header>

<main>
  <div class="row">
    <div class="col s12">

      <section id="all"></section>

      <section id="One">
        <div class="row hoverable lime lighten-3">
          <div class="col s12">
            <ul class="tabs tabs-transparent center lime lighten-3">
              <li class="tab"><a href="#amy" class="light-blue-text text-darken-4">Amy</a></li>
              <li class="tab"><a href="#bob" class="active light-blue-text text-darken-4">Bob</a></li>
              <li class="tab"><a href="#anna" class="light-blue-text text-darken-4">Anna</a></li>
              <li class="tab"><a href="#liv" class="light-blue-text text-darken-4">Liv</a></li>
            </ul>
          </div>
          <!-- .col -->
        </div>
        <!-- .row -->

        <div id="amy">Amy amy</div>
        <!-- #amy -->
        <div id="bob">Bob bob</div>
        <!-- #bob -->
        <div id="anna">Anna anna</div>
        <!-- #anna -->
        <div id="liv">Liv liv</div>
        <!-- #liv -->
      </section>

      <section id="Two">2
      </section>

      <section id="Three">3
      </section>

    </div>
  </div>
</main>

Answer 1

是 .row 上的 margin-bottom: 20px 造成了这个差距。这是“margin collapse”的结果，因为 .row 是 header 的最后一个 child ，并且有一个在 header 之外折叠的边距/p>

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

如果您希望边距显示在 header 中，您可以将其删除，或者将 overflow: hidden 添加到 header在它之外。