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

【问题标题】：Body Border not taking screen completely unless <p> padding is done?除非完成 <p> 填充，否则正文边框不会完全占据屏幕？
【发布时间】：2020-07-08 05:59:35
【问题描述】：

我刚开始学习 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 文件中时，我的身体的边框没有完全填充页面（在底部给出一个间隙），如图 1 所示。

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

Without Padding With Padding

所以我的问题是给段落填充如何影响整个身体？

【问题讨论】：

使用边距：0；填充：0；在身体课上。如果您在without padding 下检查，则返回您共享的图像，您没有文本，因此如果您将高度分配给div 或table，则高度将限制为内容直到整个页面这将为您提供所需的准确高度。
@Manjuboyz 您好，感谢您的回复。其实我不是在寻找解决方案，而是解释段落填充如何影响整个身体边框？！
是的，我明白了，这只是取决于页面的内容，与padding 无关，你给它的像素数会推动数字上的各个方向做填充。
@Manjuboyz 所以据我所知，对 paragprah 进行分页应该不会影响它，不是吗？这也是我开始的想法。顺便说一句，你提供的解决方案没有帮助:)
是的，填充不应该有助于根据您的要求进一步移动内容，为网站创建边框纹理。

标签： html css border padding

【解决方案1】：

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

【讨论】：