我剛開(kāi)始學(xué)習(xí) HTML/CSS，在做一個(gè)小頂點(diǎn)項(xiàng)目時(shí)，提出了一個(gè)可能看起來(lái)很愚蠢的問(wèn)題，但無(wú)論如何，我要問(wèn)它:)<!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>所以，這是我的代碼。問(wèn)題是，當(dāng)我沒(méi)有在 CSS 文件中放置 p{} 的填充參數(shù)時(shí)，我的正文邊框不會(huì)完全填充頁(yè)面（在底部留出間隙），如圖 1 所示。但是，當(dāng)添加填充參數(shù)時(shí)，頁(yè)面完全位于瀏覽器頁(yè)面中，如第 2 頁(yè)所示。無(wú)填充 有填充所以我的問(wèn)題是給段落添加填充如何影響整個(gè)正文？
1 回答
收到一只叮咚
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊
它不會(huì)添加影響您的主體元素的填充，而是添加任何填充主體以使其到達(dá)視口底部的內(nèi)容。基本上在第一個(gè)中，您沒(méi)有足夠的內(nèi)容，因此正文甚至在到達(dá)視口底部之前就結(jié)束了。但是當(dāng)您添加填充時(shí)，您會(huì)填充它，以便主體到達(dá)接觸視口的底部。要?jiǎng)h除空格并驗(yàn)證這個(gè)答案，只需將 body 的高度設(shè)置為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 關(guān)注
- 117 瀏覽
添加回答
舉報(bào)
0/150
提交
取消