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 {font-size: 0;} 

Answer 2

行高控制这个差距，只是适当地改变。

header > nav { line-height: 0.8; } 

只要小心继承。如果有什么东西继承这个行高，那么它可能会导致问题进一步下降。