Question

我正在使用materializecss.com中的materializecss框架。我有一个简单的图像，我放置在materializecss的导航栏上方，并且有一个小的空白区域。我查看了源码，根本没有边距，填充或边框。如果我将导航栏放在图像上方，那么空间就会消失，所以我不确定问题是什么。

<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复制，但你仍然可以看到图像和导航栏之间的空白区域。

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"/>

你的小提琴：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>

使用Materialisecss时，无法删除标题和导航栏之间的空白区域

3 个答案: