我有一个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>
答案 0 :(得分：2)
margin-bottom: 20px .row创造了这个差距。这是＆＃34;保证金崩溃的结果＆＃34;因为.row是header的最后一个孩子，并且有一个在header之外崩溃的边距
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
如果没有边框，填充，内联内容，block_formatting_context创建或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，分钟-height或max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。
如果您希望保证金显示在overflow: hidden内而不是在header之外，您可以将其删除，或将header添加到import { Injectable } from '@angular/core';
import { Http, Response, Headers, HttpModule, RequestOptions } from '@angular/http';
@Injectable()
export class ClassName{
public url:string="url";
constructor(private _http:Http) { }
authenticate(userName, password){
console.log("user:" + userName);
console.log("pass:" + password);
var authdata = window.btoa(userName + ':' + password);
var header = new Headers();
header.append('Authorization', 'Basic ' + authdata);
header.append('contentType','application/json; charset=utf-8');
header.append('Accept','application/json');
header.append('Access-Control-Allow-Origin', '*');
var option = new RequestOptions();
option.headers = header;
console.log(header);
return this._http.get(this.url + 'Method', option)
.map((response:Response)=>response.json());
}
}
。