ブートストラップページング - アイテムの下にあるギャップ/スペースを削除するには？

Question

ブートストラップのページ区切り項目の下に奇妙なギャップ/スペースがあります。どうすれば削除できますか？

マイコード：

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

継承には注意してください。この行の高さを継承するものがあれば、さらに問題が発生する可能性があります。