除非完成 <p> 填充，否则主体边框不会完全占据屏幕？

首页课程实战体系课手记专栏慕课教程

除非完成 <p> 填充，否则主体边框不会完全占据屏幕？

我刚开始学习 HTML/CSS，在做一个小顶点项目时，提出了一个可能看起来很愚蠢的问题，但无论如何，我要问它:)

<!DOCTYPE html>

<head>

<title>Capstone Project</title>

</head>

<body>

<h2>Welcome to the Landing Page!</h2>

<h3>We`re startup that is cool!</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h2>Sign up for our lunch!</h2>

<label for="fname">First Name:</label><br>

<label for="email">Email:</label><br>

</form>

</body>

</html>

所以，这是我的代码。问题是，当我没有在 CSS 文件中放置 p{} 的填充参数时，我的正文边框不会完全填充页面（在底部留出间隙），如图 1 所示。

但是，当添加填充参数时，页面完全位于浏览器页面中，如第 2 页所示。

无填充有填充

所以我的问题是给段落添加填充如何影响整个正文？

白猪掌柜的

浏览 74回答 1

1回答

收到一只叮咚

它不会添加影响您的主体元素的填充，而是添加任何填充主体以使其到达视口底部的内容。基本上在第一个中，您没有足够的内容，因此正文甚至在到达视口底部之前就结束了。但是当您添加填充时，您会填充它，以便主体到达接触视口的底部。要删除空格并验证这个答案，只需将 body 的高度设置为height: 100vh;And box-sizing: border-box;。像这样body{  font-family: 'Baloo Thambi 2', cursive;  text-align: center;  background-color: #dbe2ef;  border: 40px solid #112d4e;  border-top: 0px;  margin: 0px;  box-sizing: border-box;  height: 100vh;}

0 0

随时随地看视频慕课网APP