使用 Materializecss 时无法删除 header 和导航栏之间的白色 space

Question

我正在使用 materializecss.com 的 materializecss 框架。我有一个简单的图像，我将它放在 materializecss 的导航栏上方，并且有一个小的白色 space。我检查了来源，根本没有边距、填充或边框。如果我将导航栏放在图像上方，space 就会消失，所以我不确定问题出在哪里。

<img id="header" src="/public/images/header.gif" alt="Header"/>
  <nav class="grey darken-4">
    <div id="navbar" class="nav-wrapper">
      <ul id="nav-mobile" class="hide-on-med-and-down">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </div>
  </nav>

除了 materializecss css 文件外，我没有使用任何其他 css。有任何想法吗？我认为 css 在任何地方都没有任何边距，因为我在查看任何元素的源代码时都没有看到它。

编辑：这是一个 jsfiddle：http://jsfiddle.net/0tL9up9s/ 列表元素没有出现，因为我没有复制 javascript 但你仍然可以看到白色 space图片和导航栏。

Answer 1

好的，我认为这与图像 display:inline 的事实有关，因此具有包含 line-height.

的尺寸

将您的图像设置为 display: block 将解决此问题。

CSS

#header { display:block; }

或(HTML)

<img id="header" src="/public/images/header.gif" style="display:block" alt="Header"/>

你的fiddle：http://jsfiddle.net/0tL9up9s/1/

Answer 2

在 materialize.css 文件末尾添加 html {line-height: 0} 似乎可以解决问题。我不知道它是否会破坏任何其他功能，所以要小心。

http://jsfiddle.net/8ppt5zou/1/

Answer 3

<img id="header" style="display:block;" src="http://www.thousandwonders.net/covers/89/Bryce.Canyon.National.Park.jpg" alt="Header" >

<nav class="grey darken-4">
    <div id="navbar" class="nav-wrapper">
        <ul id="nav-mobile" class="hide-on-med-and-down">
            <li><a href="#">Profile</a>
            </li>
            <li><a href="#">Skills</a>
            </li>
            <li><a href="#">Projects</a>
            </li>
        </ul>
    </div>
</nav>

使用 Materializecss 时无法删除 header 和导航栏之间的白色 space

Can't remove white space between header and navbar when using Materializecss

html

css

materialize