个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 19:56:47 25 4
gpt4 key购买 nike

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

好的，所以我目前正在制作一个 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 中使用检查器元素后，我发现 h2 有一个恰好适合空白的 margin-top，所以我决定将其删除。然而，即使在删除之后，空白仍然保持不变。我还尝试将最后一段的底部边距设置为零，但这也没有任何作用。 . .另外，再次查看 chrome inspector 元素，我似乎无法找到导致问题的原因。

我知道答案可能是一个简单的解决方案，但对于我来说，我就是想不通!

最佳答案

此空白是由于代码中的以下两个因素造成的:

  1. #info-right 内 h2 的上边距。
  2. #parSectTwo 内 p 的下边距。

清除两个边距，这个空间将被删除。阅读更多关于 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>

关于html - HTML 页面中间的空白不会消失吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38770719/

25 4 0
文章推荐： c# - 为 URI 关联注册应用程序 (Windows Phone 8.1 RT)
文章推荐： matlab - 根据元胞数组中的内容查找列索引
文章推荐： jquery - 使用 jQuery 在正文中插入填充
文章推荐： matlab - 如何增加 MATLAB 2014b 散点图中图例的标记大小？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com