我刚开始学习 HTML/CSS，在做一个小顶点项目时，提出了一个可能看起来很愚蠢的问题，但无论如何，我要问它:)<!DOCTYPE html><html 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>所以，这是我的代码。问题是，当我没有在 CSS 文件中放置 p{} 的填充参数时，我的正文边框不会完全填充页面（在底部留出间隙），如图 1 所示。但是，当添加填充参数时，页面完全位于浏览器页面中，如第 2 页所示。无填充 有填充所以我的问题是给段落添加填充如何影响整个正文？
1 回答
收到一只叮咚
TA贡献1821条经验 获得超4个赞
它不会添加影响您的主体元素的填充，而是添加任何填充主体以使其到达视口底部的内容。基本上在第一个中，您没有足够的内容，因此正文甚至在到达视口底部之前就结束了。但是当您添加填充时，您会填充它，以便主体到达接触视口的底部。要删除空格并验证这个答案，只需将 body 的高度设置为height: 100vh;And 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;
}
- 1 回答
- 0 关注
- 45 浏览
添加回答
举报
0/150
提交
取消