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 :)
<!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%;
} */
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.
However, when adding padding parameters the page sits in browser page fully as shown in page 2.
So my question is how giving padding to paragraph is affecting whole body?
Its not adding padding that affects your body element, but adding anything that fills body so that it reaches the bottom of the viewport will make it so. Basically in the first one, you don't have enough content so that body ends even before reaching the bottom of the viewport. But as you add padding, you fill it so that body reaches to the bottom touching the viewport. To remove the space and to verify this answer, just set the heigh of body to height: 100vh; And box-sizing: border-box; . Like this
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;
}