引导分页-如何删除项目下面的间隙/空间？

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;
}

科德芬

有什么想法吗？

Answer 1

header > nav {font-size: 0;}

Answer 2

线高控制着这一差距，只要适当改变就行了.

header > nav { line-height: 0.8; }

在继承上要小心。如果有任何东西继承了这条线的高度，那么它可能会引起更低的问题。