我剛開始學習 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條經驗 獲得超5個贊
它不會添加影響您的主體元素的填充，而是添加任何填充主體以使其到達視口底部的內容?；旧显诘谝粋€中，您沒有足夠的內容，因此正文甚至在到達視口底部之前就結束了。但是當您添加填充時，您會填充它，以便主體到達接觸視口的底部。要刪除空格并驗證這個答案，只需將 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 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消