Material Design Lite white space between divs

Question

I am designing a website with material design lite and i can;t figure out why there is a space between divs in the page content. AS i am adding a new div for any of my section, it creates a white space between the previous divs or the header. See the code below :

demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}

.mdl-layout-title {
    font-family: 'League Spartan';
    font-size: 2em;
    margin-top: 5px;
}

.Home-section h1{
    color: floralwhite;
    font-family: 'League Spartan';
    text-align: center;
}

.Home-section span {
    color: deepskyblue;
}

.About-section {
    background-color: black;
    clear: inherit;
}

.Home-section {
    background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e');
    background-size: cover;
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue-cyan.min.css" />
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  <link rel="stylesheet" href="main.css">
    
    <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
    </style>
</head>
  
<body>
    <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
      <header class="mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Design Ambition</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation -->
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>
            <a class="mdl-navigation__link" href="">Portfolio</a>
            <a class="mdl-navigation__link" href="">Contact</a>
          </nav>
        </div>
      </header>

      <div class="mdl-layout__drawer mdl-layout--small-screen-only">

        <span class="mdl-layout-title">Design <br/> Ambition`</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Home</a>
          <a class="mdl-navigation__link" href="">About</a>
          <a class="mdl-navigation__link" href="">Portfolio</a>
          <a class="mdl-navigation__link" href="">Contact</a>
        </nav>
      </div>
        <main class="mdl-layout__content">
            <div class="page-content">
                <div class="Home-section"><h1>WE Create <span>DESIGNS</span> <br/> and People Just <br/>.........<br/><span>ADMIRE</span></h1></div>
                <div class="About-section"><h1>ABOUT</h1></div>
            </div>
        </main>
</div>
    
</body>
</html>

Thanks in advance for your suggestions.

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You have a h1 tag in .Home-section and another in .About-section, both of which have a vertical margin of 24px. This is causing the spacing.

Here is a very concise explanation by @Guffa as to why you see this spacing.

demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}

.mdl-layout-title {
    font-family: 'League Spartan';
    font-size: 2em;
    margin-top: 5px;
}

.Home-section h1{
    color: floralwhite;
    font-family: 'League Spartan';
    text-align: center;
}

.Home-section span {
    color: deepskyblue;
}

.About-section {
    background-color: black;
    clear: inherit;
}

.Home-section {
    background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e');
    background-size: cover;
}

h1 {
    margin: 0 !important;
}

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue-cyan.min.css" />
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  <link rel="stylesheet" href="main.css">
    
    <style>
    #view-source {
      position: fixed;
      display: block;
      right: 0;
      bottom: 0;
      margin-right: 40px;
      margin-bottom: 40px;
      z-index: 900;
    }
    </style>
</head>
  
<body>
    <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
      <header class="mdl-layout__header mdl-layout__header--waterfall">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Design Ambition</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation -->
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>
            <a class="mdl-navigation__link" href="">Portfolio</a>
            <a class="mdl-navigation__link" href="">Contact</a>
          </nav>
        </div>
      </header>

      <div class="mdl-layout__drawer mdl-layout--small-screen-only">

        <span class="mdl-layout-title">Design <br/> Ambition`</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Home</a>
          <a class="mdl-navigation__link" href="">About</a>
          <a class="mdl-navigation__link" href="">Portfolio</a>
          <a class="mdl-navigation__link" href="">Contact</a>
        </nav>
      </div>
        <main class="mdl-layout__content">
            <div class="page-content">
                <div class="Home-section"><h1>WE Create <span>DESIGNS</span> <br/> and People Just <br/>.........<br/><span>ADMIRE</span></h1></div>
                <div class="About-section"><h1>ABOUT</h1></div>
            </div>
        </main>
</div>
    
</body>
</html>

Thanks for your help. So you mean i just have to put margin of h1 to 0 to get the results. And how the h1 get the margin of 24px by itself? — pulkit, Mar 26 '16 at 11:22

score 0 · Answer 2 · answered Mar 25 '16 at 12:55

0

Please try this:

h1 {
    font-size: 56px;
    line-height: 1.35;
    letter-spacing: -.02em;
    margin: 0px 0;
}

answered Mar 25 '16 at 12:55

satya

1,145
8
12

Material Design Lite white space between divs

2 Answers2