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

只要小心繼承。如果有什麼東西繼承這個行高，那麼它可能會導致問題進一步下降。