CODEWITHSUNDEEP
htmlcssmaterialize
Sam
Sam

Reputation: 130

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

I am using the materializecss framework from materializecss.com. I have a simple image that I place above the navbar from materializecss and there is a small white space. I checked the source and there is no margin, padding or border at all. The space goes away if I put the navbar above the image so I am not sure what the problem is. 

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

I am not using any other css besides the materializecss css file. Any ideas? I don't think that css has any margins anywhere as I don't see it when viewing the source for any of the elements.

Edit: Here is a jsfiddle: http://jsfiddle.net/0tL9up9s/ The list elements aren't appearing because I haven't copied over the javascript but you can still see the white space between the image and the navbar.

Upvotes: 1

Views: 1791

Answers (3)

Anil Singhania
Anil Singhania

Reputation: 845

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

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

OK, I think it has to do with the fact that the image is display:inline and therefore has dimensions that include the line-height.

Setting your image to display: block will correct this issue.

CSS

#header { display:block; }

Or (HTML)

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

Your fiddle: http://jsfiddle.net/0tL9up9s/1/

Upvotes: 2

Vishnu M.
Vishnu M.

Reputation: 971

Adding a html {line-height: 0} to the end of the materialize.css file seems to fix the problem. I have no idea if it will break any other functionality though, so be careful.

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

Upvotes: 0

Related Questions