Daniel Daniel - 1 year ago 49
CSS Question

Little gaps in between pages on website

I'm making a website right now and there are currently little gaps in between some of my pages and I do not know what's causing them. I was hoping that somebody on this site would know a way to make the transitions between the pages seamless and smooth. I have provided a link so you can see what I am talking about.(You have to open up the full page in the code snippet to see what I'm talking about)

https://imgur.com/a/WrSNy

CSS AND HTML



body{
background-color: white;
font-family:Orbitron;
color:white;
}

.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}


.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}


h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}

.btn-default{
font-size:1.7em;
color:#337ab7;
}


.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
}

/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

/*
parallax effect end
*/

.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}

.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}

p{
font-size: 2.5em;
}

.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;

}

.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}

<!DOCTYPE html>

<html>

<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
<a href="#">Daniel Collins</a>
</li>
<li class="pull-right">
<a href="#">Contact Me</a>
</li>
<li class="pull-right">
<a href="#">Portfolio</a>
</li>
<li class="pull-right">
<a href="#">About Me</a>
</li>
</ul>

<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">

</div>
</body>
</html>






Answer Source

There is a gap at the bottom of those elements because they're inline-block and by default, inline-block will leave space at the bottom for trailing characters. To remove that, set a vertical-align like vertical-align: top.

You could also just remove display: inline-block; width: 100%; on those elements to make them block and they'll be 100% by default.

body{
      background-color: white;
      font-family:Orbitron;
      color:white;
    }
    
    .nav-pills{
    font-size: 1.7em;
    background-color: none;
    margin-bottom: 10%;
    }
    
    
    .block{
      background-color: #337ab7;
      opacity: .7;
      padding:10px;
      width:50%;
      margin-right: auto;
      margin-left: auto;
      border-radius:5px;
    }
    
    
    h1{
      padding:0;
    margin-top: 0px;
    font-size: 5.0em;
    }
    
    .btn-default{
    font-size:1.7em;
    color:#337ab7;
    }
    
    
    .pageOne{
      background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
      background-repeat: none;
      background-size: cover;
      display: inline-block;
      height: 1000px;
      width: 100%;
    }
    
    /*
    parallax effect start
    */
    .pageOne, .pageThree{
    position: relative;
    opacity: .7;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
    
    /*
    parallax effect end
    */
    
    .pageTwo{
    background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    background-repeat: none;
    background-size: cover;
    display: inline-block;
    height: 1000px;
    width: 100%;
    padding-top: 5%;
    }
    
    .pageTwoblock{
      background-color: #008B8B;
      opacity: .7;
      border-radius:5px;
    }
    
    p{
      font-size: 2.5em;
    }
    
    .me{
    height: 850px;
      display:block;
      margin-right: auto;
      margin-left: auto;
    
    }
    
    .pageThree{
    background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
    background-repeat: none;
    background-size: cover;
    display: inline-block;
    height: 1000px;
    width: 100%;
    padding-top:5%;
    }
    
    .page {
    vertical-align: top;
    }
<!DOCTYPE html>

    <html>

      <head>
    <title>Daniel's Portfolio | Welcome</title>
    <link rel="stylesheet" href="CSS/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="CSS/style.css">
    <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    </head>
    <body>
    <div class="pageOne page text-center">
      <ul class = "nav nav-pills">
    <li>
      <a href="#">Daniel Collins</a>
    </li>
    <li class="pull-right">
      <a href="#">Contact Me</a>
    </li>
    <li class="pull-right">
      <a href="#">Portfolio</a>
    </li>
    <li class="pull-right">
      <a href="#">About Me</a>
    </li>
    </ul>
    
    <div class="block text-center">
    <h1>Daniel's Portfolio Website</h1>
    <h2>Various Projects</h2>
    </div>
    <div class = "btnList text-center">
      <a class = "btn btn-default" href="#">Reddit</a>
      <a class = "btn btn-default" href="#">GitHub</a>
      <a class = "btn btn-default" href="#">Linkedin</a>
      <a class = "btn btn-default" href="#">Facebook</a>
    </div>
    </div>
    <div class= "pageTwo page">
    <div class= "col-md-6 pageTwoblock">
    <div class="row">
    <div class ="text-center">
          <h1>Daniel Collins</h1>
          <p>
            I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
             different areas of web development from back end programming (PHP, C#, Java) to front end engineering
             (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
          </p>
        </div>
        </div>
        </div>
        </div>
    <div class= "pageThree page">
    
    </div>
       </body>
    </html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download