Question

给出一个页面，其中每个页面下面都有三个块元素（这里是header，main和footer），我想确保这三个元素之间没有垂直边距元素。问题在于main元素的内容是生成的（使用模板语言），我不能对包含的标记做太多假设。

请考虑以下示例：请注意我如何明确省略标题的底边距和第一段的顶边距。 las，使用main > *:last-child不适用于嵌套在p元素中的li。有没有一种方法可以概括这一点，例如嵌套在p中的li也被省略了吗？

header {
  background-color: red;
}

main {
  background-color: green;
}

footer {
  background-color: blue;
}

h1 {
  margin-bottom: 0
}

main > *:first-child {
  margin-top: 0
}

<header>
  <h1>
    Hello
  </h1>
</header>
<main>
  <p>
    Some content
  </p>
  <ul>
    <li>
      <p>
        Some list item
      </p>
    </li>
  </ul>
</main>
<footer>
  There should be no white gap above!
</footer>

我希望main元素的底部没有空白（甚至没有嵌套元素，例如p元素），这样footer元素就在它下面。

Answer 1

我认为您可以针对您的具体情况执行此操作。可能与main中的其他内容一起出现，其他问题也可能出现。

header {
  background-color: red;
}

main {
  background-color: green;
}

footer {
  background-color: blue;
}

h1 {
  margin-bottom: 0
}

main > *:first-child {
  margin-top: 0
}
main *:last-child {
   margin-bottom: 0;
}

<header>
  <h1>
    Hello
  </h1>
</header>
<main>
  <p>
    Some content
  </p>
  <ul>
    <li>
      <p>
        Some list item
      </p>
    </li>
  </ul>
</main>
<footer>
  There should be no white gap above!
</footer>

如何避免块元素之间的垂直边距？

1 个答案: