CODEWITHSUNDEEP
htmlcss
Brett Carwile
Brett Carwile

Reputation: 127

White Space in Middle of HTML Page Won't Go Away?

Before I begin, I'd like to say that I am aware of similar questions that have already been asked on this site. . .It is just that none of the provided answers have been successful in helping me find a solution.

Ok, so I am currently making an HTML page. . . Everything was going fine, and I was able to overcome all the problems I ran into. That is, until I came across this pesky white space on my page.

To help you understand, please run the following code, and scroll down past the last paragraph.

@import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);

header {
	background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
	height: 100vh;
	width: 100vw;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;	
		
}
	
h1, h3 {
	font-family: 'Raleway', sans-serif;
	color: white;
}

h1 {
	font-size: 6em;
}

h3 {
	font-size: 2em;
}

html, body {
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
	height: 100%;
}

p {
	 width: 70%;
	 margin: 0 auto 30px;
	 font-family: 'Bitter', san-serif;
	 color: white;
	 font-size: 2em;
	 text-align: center;
}


/*Below are the ids and classes*/

#parSectOne {
	border-bottom: 8px solid white;
	border-top: 8px solid white;
	background-color: #CE6269;
	
}

#parSectTwo {
	background-color: #75A3A9;
}


#info-right {
	height: 50vh;
	width: 50vw;
	border-right: 2px solid black;
}

#info-right h2 {
	font-family:'Raleway', sans-serif;
}




.pars {
	padding-top: 60px;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Page Test</title>
		<link rel="stylesheet" type="text/css" href="test.css">
	</head>
	<body>
		<div id="wrapper">
			<header>
				<h1>Welcome To This Page</h1>
				<h3>It is nice to see you. . .</h3>
			</header>
			<div id="parSectOne" class="pars">
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus, 
				diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper. 
				Proin lobortis molestie quam dignissim posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus.
				Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante
				Nullam tincidunt eros magna, at finibus libero dictum id.
				</p>
				<p>
				Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate. 
				Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum eros, 
				ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus. 
				Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim nec eros eu, mollis sodales massa.
				</p>
			</div>
			<div id="parSectTwo" class="pars">
				<p>
				Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna. 
				Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue. 
				Etiam eleifend nisl laoreet augue faucibus laoreet id sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac. 
				Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus.
				Morbi cursus sapien vel sem tempor venenatis. 
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
				</p>
				<p>
				In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est, 
				nec consequat augue risus et diam.
				Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac porttitor nunc feugiat volutpat.
				Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi. 
				Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris a efficitur leo. 
				Donec sodales lectus id sapien facilisis hendrerit. 
				Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
				</p>
			</div>
			<div id="info-right">
				<h2>Click The Button To Find What You are Looking For</h2>
				<button type="button" id="button-left">Click Me</button>
			</div>
		</div>
	</body>
</html>

As you can see, there is a white space between the last paragraph, and the h2. Upon using the inspector element in Chrome, I discovered that the h2 had a margin-top that fit right within the whitespace, so I decided to remove it. However, even after removal, the whitespace stayed the same. I also tried to give the last paragraph a margin-bottom of zero, but that also didn't do anything. . . Also, looking again through the chrome inspector element, I can't seem to find what is causing the problem.

I know the answer is probably a simple solution, but for the life of me, I just can't figure it out!

Upvotes: 0

Views: 128

Answers (2)

j3ff
j3ff

Reputation: 6089

By using CSS selector p:last-child you can remove the bottom margin of the last paragraph of parSectTwosection 

#parSectTwo p:last-child {
    margin-bottom: 0;
}

And also remove top margin from h2

h2 {
    margin-top: 0;
}


@import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);

header {
  background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h1,
h3 {
  font-family: 'Raleway', sans-serif;
  color: white;
}

h1 {
  font-size: 6em;
}

h2 {
  margin-top: 0;
}

h3 {
  font-size: 2em;
}

html,
body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  height: 100%;
}

p {
  width: 70%;
  margin: 0 auto 30px;
  font-family: 'Bitter', san-serif;
  color: white;
  font-size: 2em;
  text-align: center;
}

/*Below are the ids and classes*/

#parSectOne {
  border-bottom: 8px solid white;
  border-top: 8px solid white;
  background-color: #CE6269;
}

#parSectTwo {
  background-color: #75A3A9;
}
  
#parSectTwo p:last-child {
  margin-bottom: 0;
}

#info-right {
  height: 50vh;
  width: 50vw;
  border-right: 2px solid black;
}

#info-right h2 {
  font-family: 'Raleway', sans-serif;
}

.pars {
  padding-top: 60px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Page Test</title>
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
  <div id="wrapper">
    <header>
      <h1>Welcome To This Page</h1>
      <h3>It is nice to see you. . .</h3>
    </header>
    <div id="parSectOne" class="pars">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus, diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper. Proin lobortis molestie quam dignissim
        posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus. Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante Nullam tincidunt eros magna,
        at finibus libero dictum id.
      </p>
      <p>
        Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate. Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum
        eros, ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus. Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim
        nec eros eu, mollis sodales massa.
      </p>
    </div>
    <div id="parSectTwo" class="pars">
      <p>
        Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna. Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue. Etiam eleifend nisl laoreet augue faucibus laoreet id
        sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac. Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus. Morbi cursus sapien vel sem tempor venenatis. Pellentesque habitant morbi
        tristique senectus et netus et malesuada fames ac turpis egestas.
      </p>
      <p>
        In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est, nec consequat augue risus et diam. Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac
        porttitor nunc feugiat volutpat. Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi. Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris
        a efficitur leo. Donec sodales lectus id sapien facilisis hendrerit. Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
      </p>
    </div>
    <div id="info-right">
      <h2>Click The Button To Find What You are Looking For</h2>
      <button type="button" id="button-left">Click Me</button>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

This white space is because of following two factors in your code:

  1. Top margin of h2 inside #info-right.
  2. Bottom margin of p inside #parSectTwo.

Clear both margins and this space will be removed. Read more about Collapsing Margins.

@import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);

header {
  background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;	
}

h1, h3 {
  font-family: 'Raleway', sans-serif;
  color: white;
}

h1 {
  font-size: 6em;
}

h3 {
  font-size: 2em;
}

html, body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  height: 100%;
}

p {
  width: 70%;
  margin: 0 auto 30px;
  font-family: 'Bitter', san-serif;
  color: white;
  font-size: 2em;
  text-align: center;
}

/*Below are the ids and classes*/
#parSectOne {
  border-bottom: 8px solid white;
  border-top: 8px solid white;
  background-color: #CE6269;
}

#parSectTwo {
  background-color: #75A3A9;
}

#info-right {
  height: 50vh;
  width: 50vw;
  border-right: 2px solid black;
}

#info-right h2 {
  font-family:'Raleway', sans-serif;
  margin: 0;
}

#parSectTwo p:last-child {
  margin-bottom: 0;
}

.pars {
  padding-top: 60px;
}
<div id="wrapper">
  <header>
    <h1>Welcome To This Page</h1>
    <h3>It is nice to see you. . .</h3>
  </header>
  <div id="parSectOne" class="pars">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus, 
      diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper. 
      Proin lobortis molestie quam dignissim posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus.
      Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante
      Nullam tincidunt eros magna, at finibus libero dictum id.
    </p>
    <p>
      Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate. 
      Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum eros, 
      ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus. 
      Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim nec eros eu, mollis sodales massa.
    </p>
  </div>
  <div id="parSectTwo" class="pars">
    <p>
      Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna. 
      Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue. 
      Etiam eleifend nisl laoreet augue faucibus laoreet id sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac. 
      Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus.
      Morbi cursus sapien vel sem tempor venenatis. 
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </p>
    <p>
      In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est, 
      nec consequat augue risus et diam.
      Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac porttitor nunc feugiat volutpat.
      Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi. 
      Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris a efficitur leo. 
      Donec sodales lectus id sapien facilisis hendrerit. 
      Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
    </p>
  </div>
  <div id="info-right">
    <h2>Click The Button To Find What You are Looking For</h2>
    <button type="button" id="button-left">Click Me</button>
  </div>
</div>

Upvotes: 6

Related Questions