如何消除 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中文网其他相关文章！