Question

我正在尝试在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;

}

不幸的是，在极端顶部出现了白色空间，即使有保证金也不会消失：0px;或margin-top：0px;

所以任何想法如何删除它？

Answer 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像素，要覆盖浏览器设置，您需要将其添加到您的css中：

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

Answer 2

这是因为你的h1标签占用了保证金。

materialize.min.css将h1标记设为margin: 2.1rem 0 1.68rem;

使用以下方法解决您的问题。

h1 {
  margin: 0;
  padding: 0;
}

<强> Working Fiddle

Answer 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;
}

如何删除顶部的空白区域

3 个答案: