我正在嘗試創建一個英雄框，但我的英雄框和導航欄之間有空白。我無法擺脫它！我猜它與 flexbox 和/或網格有關，但我不確定。
我將 nav 紫色和 herobox 染成藍色，試圖弄清楚他們為什么不互相關注。我嘗試在 CSS 中弄亂邊距和顯示。
元素的鉻檢查：
到目前為止我的代碼：
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
@media screen and (max-width: 800px) {
.left,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
}<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<a href="#Coupons">
<p>Coupons!</p>
</a>
</div>
<div class="right">
<a href="#Order">
<p>Order Online!</p>
</a>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button><a href="#menu">View our menu!</a></button>
</div>
</main>uj5u.com熱心網友回復：
解決方案
設定h1為margin-top: 0。
解釋
h1有一個正在使用該部分margin-top創建空間header。
發生這種情況是因為，即使h1是元素的后代main，它的上邊距也取代了其祖先（.hero和main）的上邊距。
發生這種情況是因為保證金崩潰的規則。
§ 8.3.1 折疊邊距
在 CSS 中，兩個或多個框（可能是或不是兄弟）的相鄰邊距可以組合形成一個邊距。
以這種方式組合的邊距稱為折疊邊距，由此產生的組合邊距稱為折疊邊距。
相鄰的垂直邊距折疊，[在某些情況下]除外。
水平邊距永遠不會塌陷。
如果元素沒有上邊框、沒有上邊距且子元素沒有間隙，則流入塊元素的上邊距與其第一個流入塊級子元素的上邊距一起折疊。
uj5u.com熱心網友回復：
似乎是頁眉頂部的邊距導致了問題。嘗試給它一個 0 的邊距并在需要時給它填充，看看會發生什么
h1 {
font-size: 15vw;
margin-top: 0;
}
uj5u.com熱心網友回復：
額外邊距來自 h1（在代碼中注釋，資訊在這里）。用于制作完全自己的樣式的有用片段：
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
洗掉所有邊距和填充，并使所有元素的框大小相同。
此外，例如，使用網格樣式重新創建導航，盡量避免浮動定位元素，其旨在定位文本中的影像等。
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
display:grid;
grid-template-columns:1fr 1fr;
}
.left {
padding: 20px;
place-self: center start;
box-sizing: border-box;
text-decoration: none;
}
.right {
padding: 20px;
place-self: center end;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
@media screen and (max-width: 800px) {
.topnav{
grid-template-columns:1fr;
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
margin-top:0; /* fix */
}<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<a href="#Coupons"><p>Coupons!</p></a>
</div>
<div class="right">
<a href="#Order"><p>Order Online!</p></a>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button><a href="#menu">View our menu!</a></button>
</div>
</main>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/494653.html
上一篇：org.springframework.dao.IncorrectResultSizeDataAccessExceptionMongoLimit不起作用？
下一篇：在制作居中表格時需要幫助