Bootstrap分页 - 如何删除项目下方的间隙/空间？

Question

Bootstrap中的分页项下面有一个奇怪的间隙/空格。我该如何删除它？

我的代码：

<header role="navigation">

  <!-- justify-content-end is only available on bootstrap 4 -->
  <nav aria-label="Page navigation">
    <ul class="pagination pagination-lg justify-content-end">
      <li id="high1" class="page-item"><a class="page-link" href="#anchor-1">1</a></li>
      <li id="high2" class="page-item"><a class="page-link" href="#anchor-2">2</a></li>
      <li id="high3" class="page-item"><a class="page-link" href="#anchor-3">3</a></li>
    </ul>
  </nav>

</header>

CSS：

header {
  position: fixed;
  z-index: 99999;
  padding: 0;
  margin: 0;
  border: 1px solid black;
}

header > nav {
  padding: 0;
  margin: 0;
  border: 2px solid green;
}

.pagination {
  margin: 0;
  padding: 0;
  border: 1px solid red;
}

.pagination>li>a,
.pagination>li>span {
  border: none;
  color: #000;
}

.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
  border-radius: 0;
}

Codepen

有什么想法吗？

Answer 1

行高控制此差距，只需根据需要进行更改。

header > nav { line-height: 0.8; }

请谨慎继承。如果有任何东西继承了这个行高，那么它可能会导致问题进一步缩小。

Answer 2

header > nav {font-size: 0;}