Граница тела не снимает экран полностью, если не выполнено заполнение <p>? - PullRequest
Новая
       15

Граница тела не снимает экран полностью, если не выполнено заполнение <p>?

0 голосов
/ 27 марта 2020

Я недавно начал изучать 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.

Без заполнения С заполнением

Поэтому мой вопрос заключается в том, как дополнение к абзацу влияет на все тело?

1 Ответ

0 голосов
/ 27 марта 2020

Это не добавление отступов, которые влияют на ваш элемент тела, но добавление всего, что заполняет тело так, чтобы оно достигло нижней части области просмотра, сделает это так. По сути, в первом случае вам не хватает содержимого, чтобы тело заканчивалось еще до того, как оно достигнет нижней части области просмотра. Но когда вы добавляете отступы, вы заполняете его так, чтобы тело доходило до дна, касаясь области просмотра. Чтобы убрать пробел и проверить этот ответ, просто установите высоту тела на 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;
}
...