如何消除 HTML 和 CSS 中標題上方的意外邊距？

消除標題周圍不需要的邊距

為了盡量減少標題上方不需要的空間，引入了HTML 和CSS 片段:

body {
  margin: 0px;
  padding: 0px;
}

header {
  margin: 0px;
  padding: 0px;
  height: 20em;
  background-color: #C0C0C0;
}

<header>
  <h1 id="OQ-Online-Judge">OQ Online Judge</h1>
  <form action="<?php%20echo%20base_url();%20?>%20/index.php/base/si" method="post">
    <label for="email1">E-mail : </label>
    <input type="text" name="email">
</form></header>

儘管設定了邊距和元素為零，仍然出現非零邊距。這個神秘的空間是由邊距折疊產生的。

理解邊距折疊

當某些具有相鄰邊距的元素折疊成單一邊距時，就會發生邊距折疊。這在區塊級容器內的元素中很常見。在這種情況下，

和 元素都是區塊級元素。

解決方案：對特定標題元素應用邊距

要消除不需要的邊距，請將零邊距應用於特定標題元素導致問題的標頭元素。在這種情況下，它是

。

h1 {
    margin-top: 0;
}

透過設定

的 margin-top 屬性元素為零，邊距折疊被破壞，標題上方不需要的空間被消除。

以上是如何消除 HTML 和 CSS 中標題上方的意外邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！