HTML页面中间的空白不会消失吗？

在开始之前，我想说，我知道这个网站上已经有人问过类似的问题。只是提供的答案都没有成功地帮助我找到解决方案。

好的，所以我目前正在制作一个HTML页面。一切都很顺利，我克服了遇到的所有问题。也就是说，直到我在我的页面上看到这个讨厌的空白。

为了帮助您理解，请运行以下代码，向下滚动到最后一段。

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

正如你所看到的，在最后一段和h2之间有一个空白。在Chrome中使用inspector元素时，我发现h2的页边空白正好位于空白中，所以我决定删除它。然而，即使删除了它，空白仍然保持不变。我还试图给最后一段零的边距，但这也没有起到任何作用。此外，通过chrome inspector元素再次查看，我似乎找不到问题的原因。

我知道答案可能是一个简单的解决方案，但就我的一生而言，我就是想不通！

这个空白是因为代码中有以下两个因素：

h2在#info-right内的上边距
p在#parSectTwo内的下边距

清除两个页边距，此空格将被删除。阅读有关折叠页边距的更多信息。

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

使用CSS选择器p:last-child可以删除parSectTwo部分最后一段的底部边距

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

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

相关内容

最新更新

热门标签：