title: Body Border not taking screen completely unless <p> padding is done?
body: <p>I am newly started learning HTML/CSS and while doing a little capstone project and came up with a question which may seem stupid but anyway, I am going to ask it :)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Capstone Project&lt;/title&gt;
      &lt;link rel="stylesheet" href="CAPSTONE_PROJECT.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Baloo+Thambi+2&amp;display=swap" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;h2&gt;Welcome to the Landing Page!&lt;/h2&gt;
      &lt;h3&gt;We`re startup that is cool!&lt;/h3&gt;
  
      &lt;p&gt;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.&lt;/p&gt;
      &lt;p&gt;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.&lt;/p&gt;
  
      &lt;form class="signup" action="welcome.html" method="get"&gt;
  
        &lt;h2&gt;Sign up for our lunch!&lt;/h2&gt;
  
        &lt;label for="fname"&gt;First Name:&lt;/label&gt;&lt;br&gt;
        &lt;input id="fname" type="text" name="fname" value=""&gt;&lt;br&gt;
  
        &lt;label for="lname"&gt;Last Name:&lt;/label&gt;&lt;br&gt;
        &lt;input id="lname" type="text" name="lname" value=""&gt;&lt;br&gt;
  
        &lt;label for="email"&gt;Email:&lt;/label&gt;&lt;br&gt;
        &lt;input id="email" type="text" name="email" value=""&gt;&lt;br&gt;
  
        &lt;input id="submit" type="submit" name="submit" value="Sign Me Up!"&gt;
  
  
      &lt;/form&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  
  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%;
  } */
  </code></pre>
  
  <p>So, here is my codes. The problem is when I do not put padding parameters for p{} in CSS file the border for my body not filling page fully (Giving a gap at the bottom) like in picture 1.</p>
  
  <p>However, when adding padding parameters the page sits in browser page fully as shown in page 2.</p>
  
  <p><a href="https://i.stack.imgur.com/LjaBt.png" rel="nofollow noreferrer">Without Padding</a>
  <a href="https://i.stack.imgur.com/uBb2W.png" rel="nofollow noreferrer">With Padding</a></p>
  
  <p>So my question is how giving padding to paragraph is affecting whole body?</p>