Jest dziwna przerwa / przestrzeń poniżej paginacyjnych elementów w Bootstrap. Jak mogę go usunąć?

enter image description here

Mój kod:

<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

Jakieś pomysły?

1
Run 15 luty 2017, 18:00

2 odpowiedzi

Najlepsza odpowiedź
header > nav {font-size: 0;}
1
arturmoroz 15 luty 2017, 15:16

Wysokość linii kontroluje tę lukę, po prostu zmieniaj odpowiednio.

header > nav { line-height: 0.8; }

Uważaj tylko na dziedzictwo. Jeśli coś dziedziczy tę wysokość linii, może to spowodować dalsze problemy.

1
Tristan Hudson 15 luty 2017, 15:08