0
在開始之前，我想說我知道本網站上已經提出過類似的問題。 。 。所提供的答案都不能幫助我找到解決方案。HTML頁面中間的空白不會消失？
好的，所以我目前正在製作一個HTML頁面。 。 。一切都很順利，我能夠克服所有遇到的問題。也就是說，直到我在我的頁面上遇到這個討厭的空白處。
爲了幫助您理解，請運行以下代碼，並向下滾動到最後一段。
@import url(https://fonts.googleapis.com/css?family=Bitter:300,400);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300);
header {
\t background-image: url(https://wallpaperscraft.com/image/yellow_red_spots_background_abstract_65559_2048x1152.jpg);
\t height: 100vh;
\t width: 100vw;
\t background-size: cover;
\t background-position: center;
\t display: flex;
\t flex-direction: column;
\t justify-content: center;
\t align-items: center;
\t text-align: center; \t
\t \t
}
\t
h1, h3 {
\t font-family: 'Raleway', sans-serif;
\t color: white;
}
h1 {
\t font-size: 6em;
}
h3 {
\t font-size: 2em;
}
html, body {
\t margin: 0px;
\t padding: 0px;
\t overflow-x: hidden;
\t height: 100%;
}
p {
\t width: 70%;
\t margin: 0 auto 30px;
\t font-family: 'Bitter', san-serif;
\t color: white;
\t font-size: 2em;
\t text-align: center;
}
/*Below are the ids and classes*/
#parSectOne {
\t border-bottom: 8px solid white;
\t border-top: 8px solid white;
\t background-color: #CE6269;
\t
}
#parSectTwo {
\t background-color: #75A3A9;
}
#info-right {
\t height: 50vh;
\t width: 50vw;
\t border-right: 2px solid black;
}
#info-right h2 {
\t font-family:'Raleway', sans-serif;
}
.pars {
\t padding-top: 60px;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <meta charset="utf-8">
\t \t <title>Page Test</title>
\t \t <link rel="stylesheet" type="text/css" href="test.css">
\t </head>
\t <body>
\t \t <div id="wrapper">
\t \t \t <header>
\t \t \t \t <h1>Welcome To This Page</h1>
\t \t \t \t <h3>It is nice to see you. . .</h3>
\t \t \t </header>
\t \t \t <div id="parSectOne" class="pars">
\t \t \t \t <p>
\t \t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula, enim ut tempor maximus,
\t \t \t \t diam massa auctor sapien, sit amet porta quam est eu ex. Vivamus dapibus purus quis nibh malesuada ullamcorper.
\t \t \t \t Proin lobortis molestie quam dignissim posuere. Praesent vitae iaculis neque, vitae interdum dui. Quisque eget neque purus.
\t \t \t \t Donec tempus nisi orci, eget venenatis nisi semper venenatis. Pellentesque diam risus, rutrum nec aliquet vitae, iaculis finibus ante
\t \t \t \t Nullam tincidunt eros magna, at finibus libero dictum id.
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t Praesent feugiat ante sed lectus tempor iaculis. Curabitur vulputate placerat lobortis. Morbi ultricies mollis vulputate.
\t \t \t \t Fusce aliquet luctus molestie. Sed consequat semper vulputate. In accumsan, lacus ac pellentesque feugiat, lectus purus elementum eros,
\t \t \t \t ut mollis tortor libero ac mi. Suspendisse porta velit non elementum suscipit. Donec porttitor ut neque eget cursus.
\t \t \t \t Integer malesuada aliquet porta. Donec at eros placerat, luctus lacus consectetur, rhoncus nunc. Integer nunc enim, dignissim nec eros eu, mollis sodales massa.
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <div id="parSectTwo" class="pars">
\t \t \t \t <p>
\t \t \t \t Sed in sem tellus. Pellentesque eu lacus vitae orci accumsan volutpat imperdiet sed urna.
\t \t \t \t Etiam porttitor massa nec purus scelerisque, in maximus justo scelerisque. Pellentesque nec porttitor augue.
\t \t \t \t Etiam eleifend nisl laoreet augue faucibus laoreet id sed augue. Donec porttitor urna arcu, a rhoncus est tristique ac.
\t \t \t \t Fusce venenatis laoreet enim eget varius. Sed at nulla bibendum diam pellentesque posuere id ac purus.
\t \t \t \t Morbi cursus sapien vel sem tempor venenatis.
\t \t \t \t Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
\t \t \t \t </p>
\t \t \t \t <p>
\t \t \t \t In suscipit placerat tellus eu maximus. Phasellus vestibulum, nunc non ultricies tincidunt, odio nibh rutrum est,
\t \t \t \t nec consequat augue risus et diam.
\t \t \t \t Fusce orci ex, tincidunt non egestas ut, pulvinar sit amet odio. Phasellus consequat egestas ante, ac porttitor nunc feugiat volutpat.
\t \t \t \t Praesent at ligula vel enim imperdiet gravida. Vestibulum eleifend odio vel fringilla vestibulum. Nulla facilisi.
\t \t \t \t Vestibulum et massa sodales, mollis felis ac, feugiat enim. Etiam vel scelerisque purus. Mauris a efficitur leo.
\t \t \t \t Donec sodales lectus id sapien facilisis hendrerit.
\t \t \t \t Fusce pretium, magna sed sodales ultricies, enim enim scelerisque nibh, sed posuere lectus ipsum sed nunc.
\t \t \t \t </p>
\t \t \t </div>
\t \t \t <div id="info-right">
\t \t \t \t <h2>Click The Button To Find What You are Looking For</h2>
\t \t \t \t <button type="button" id="button-left">Click Me</button>
\t \t \t </div>
\t \t </div>
\t </body>
</html>正如你所看到的，還有就是H2末段之間的空白，和。在Chrome中使用檢查器元素後，我發現h2在空白區域內有一個邊緣頂部，因此我決定刪除它。但是，即使在刪除之後，空白仍保持不變。我也試着給最後一段留下零點，但那也沒有做任何事情。 。 。此外，再次通過鉻檢查器元素，我似乎無法找到是什麼導致問題。
我知道答案可能是一個簡單的解決方案，但對於我的生活，我只是無法弄清楚！
像'的margin-top：-30px;'h2元素上會適合您的問題？ –
這是由於邊緣崩潰。從'h2'中刪除最後一個'p'的底部'margin'和'h2'的頂部'margin'。 –