Question

我有一个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

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()); } }。

如何摆脱连续<header>和<main>

1 个答案: