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

【问题标题】：Bootstrap pagination - how to remove gap/ space below the items?引导分页 - 如何删除项目下方的间隙/空间？
【发布时间】：2017-07-04 07:42:57
【问题描述】：

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

有什么想法吗？

【问题讨论】：

标签： html css twitter-bootstrap pagination

【解决方案1】：

Line-height 控制这个间隙，只要适当改变。

header > nav { line-height: 0.8; }

请注意继承。如果有任何东西继承了这个行高，那么它可能会导致问题进一步下降。

【讨论】：

【解决方案2】：

header > nav {font-size: 0;}

【讨论】：