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

Question

我刚刚开始学习 HTML/CSS，在做一个小顶点项目时，提出了一个看似愚蠢但无论如何，我都会问的问题:)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Capstone Project</title>
    <link rel="stylesheet" href="CAPSTONE_PROJECT.css">
    <link href="https://fonts.googleapis.com/css?family=Baloo+Thambi+2&display=swap" rel="stylesheet">
  </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>
    <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>

    <form class="signup" action="welcome.html" method="get">

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

      <label for="fname">First Name:</label><br>
      <input id="fname" type="text" name="fname" value=""><br>

      <label for="lname">Last Name:</label><br>
      <input id="lname" type="text" name="lname" value=""><br>

      <label for="email">Email:</label><br>
      <input id="email" type="text" name="email" value=""><br>

      <input id="submit" type="submit" name="submit" value="Sign Me Up!">


    </form>

  </body>
</html>

body{
  font-family: 'Baloo Thambi 2', cursive;
  text-align: center;
  background-color: #dbe2ef;
  border: 40px solid #112d4e;
  border-top: 0px;
  margin: 0px;
}

/* p{
  padding-top: 5%;
  padding-left: 20%;[enter image description here][1]
  padding-right: 20%;
} */

所以，这是我的代码。问题是当我没有将 p{} 的填充参数放入 CSS 文件时 body 的边框没有像图 1 那样完全填充页面（在底部留出空隙）

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

Without Padding With Padding

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

Answer 1

它不会添加影响 body 元素的填充，而是添加任何填充 body 使其到达视口底部的东西。基本上在第一个中，您没有足够的内容，因此 body 甚至在到达视口底部之前就结束了。但是当你添加 padding 时，你会填充它，以便 body 到达接触视口的底部。要删除 space 并验证此答案，只需将 body 的高度设置为 height: 100vh; 和 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;
}

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

Body Border not taking screen completely unless <p> padding is done?

html

css

border

padding