如何去除顶部的空白答案

【问题标题】：how to remove white space on the top如何去除顶部的空白
【发布时间】：2016-02-09 14:52:30
【问题描述】：

我正在尝试在 materializecss 的导航栏上方创建顶部 jumbotron 这是我的 template.php 代码：

<!DOCTYPE html>
  <html>
   <head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
  <link rel="stylesheet" type="text/css" href="includes.css"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

<div class="top">
    <h1>Hello Sykox</h1>
</div>


<nav>
<div class="nav-wrapper">
  <a href="#" class="brand-logo">Logo</a>
  <ul id="nav-mobile" class="right hide-on-med-and-down">
    <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>

这里是includes.css的代码

.top {
height: 170px;
background-color: #ef9a9a;
margin: 0px;

}

不幸的是，在极端顶部出现了空白，即使有 margin: 0px; 它也不会消失。或 margin-top:0px;

那么知道如何删除它吗？

【问题讨论】：

标签： html css materialize

【解决方案1】：

试试这个：

<!DOCTYPE html>
  <html>
   <head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
  <style>
    html, body, h1, h2, h3, h4, h5, h6, div {
      padding: 0;
      border: 0;
      margin: 0;
    }
    .top {
      padding: 0;
      height: 170px;
      background-color: #ef9a9a;
      margin: 0px;
    }
  </style>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>

<div class="top">
    <h1>Hello Sykox</h1>
</div>


<nav>
<div class="nav-wrapper">
  <a href="#" class="brand-logo">Logo</a>
  <ul id="nav-mobile" class="right hide-on-med-and-down">
    <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>

说明：
每个浏览器都有自己的偏好，例如当我在 Chrome 上尝试时，边距设置为 8 px，要覆盖浏览器设置，您需要将其添加到您的 css 中：

html, body, h1, h2, h3, h4, h5, h6, div {
      padding: 0;
      border: 0;
      margin: 0;
    }

【讨论】：

像魅力一样工作......非常感谢......@budiantoip
@budiantoip 你介意解释一下为什么我的回答不起作用吗？
等等，让我试试你的
@VickyGonsalves 检查这里。 jsfiddle.net/rbcz3unv/1。 h1标签被materialize.min.css设置为margin: 2.1rem 0 1.68rem;，它将覆盖* css
嗯，已经回答了。你在回答之前试过吗？我做到了，这就是为什么我的回答比你的要长。无论如何，让我们继续帮助人们:)

【解决方案2】：

这是因为你的h1标签占了边距。

materialize.min.css 设置h1 标签为margin: 2.1rem 0 1.68rem;

使用以下解决您的问题。

h1 {
  margin: 0;
  padding: 0;
}

Working Fiddle

【讨论】：

【解决方案3】：

像这样添加一个css重置：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

【讨论】：

如果我以后想为某些元素添加填充，它不会冲突......或者我应该使用！important;
不会。它只会初始化一个新的调色板。