Div ist größer als sein Inhalt

Question

Ich versuche, Inhalt unterhalb dieser Datasets Paging-Steuerelement zu platzieren, aber das div ist größer als sein Inhalt. Das drückt meinen Inhalt weiter nach unten, als ich es möchte.

https://jsfiddle.net/DTcHh/32535/

<div id="wrapper"> 
    <div style="display:inline;" class="col-sm-6 col-md-6 pt-3"> 
    <div class="dataTables_paginate paging_simple_numbers" id="crfTable_paginate"> 
    <ul class="pagination"> 
     <li class="paginate_button previous disabled" id="crfTable_previous"> 
     <a href="#" aria-controls="crfTable" data-dt-idx="0" tabindex="0">Previous</a> 
     </li> 
     <li class="paginate_button active"> 
     <a href="#" aria-controls="crfTable" data-dt-idx="1" tabindex="0">1</a> 
     </li> 
     <li class="paginate_button next disabled" id="crfTable_next"> 
     <a href="#" aria-controls="crfTable" data-dt-idx="2" tabindex="0">Next</a> 
     </li> 
    </ul> 
    </div> 
    </div> 
</div> 

und die entsprechenden Datentabellen CSS:

div.dataTables_paginate { 
    margin: 0; 
    white-space: nowrap; 
    text-align: right; 
} 

div.dataTables_paginate ul.pagination { 
    margin: 2px 0; 
    white-space: nowrap; 
} 

Ich habe beide versucht, die Chrome und Firefox Debugger in der Umgebung wurden Stossen einen Stil zu finden, die dies verursacht, aber es sagt nur, dass das Element ist 43 Pixel in Höhe statt der 38 (34 von der ul, mit dem 2 Rand oben und unten), dass es sein sollte.

Irgendwelche Gedanken darüber, was das verursacht? Warum würde es den Schrumpffolieneffekt verlieren?

Ich habe versucht, Inline-, sowie Inline-Block zum Container div und eine maximale Höhe hinzufügen: 38, aber nichts hat diese zusätzlichen 5px entfernt.

Answer 1

Sie wie unten schreiben sollte

Die line-height Eigenschaft definiert die Menge an Leerzeichen über und unter Inline-Elementen.

div.dataTables_paginate ul.pagination { 
    margin: 2px 0; 
    white-space: nowrap; 
    line-height: 10px; 
} 

Answer 2

Zuerst für Ihre col-sm-6 col-md-6 pt-3 Div müssen Sie diese display: inline entfernen. Und für ul.pagination Satz, dass es display: block:

<div id="wrapper"> 
    <div class="col-sm-6 col-md-6 pt-3"> 
    <div class="dataTables_paginate paging_simple_numbers" id="crfTable_paginate"> 
    <ul class="pagination" style="display:block"> 
     <li class="paginate_button previous disabled" id="crfTable_previous"> 
     <a href="#" aria-controls="crfTable" data-dt-idx="0" tabindex="0">Previous</a> 
     </li> 
     <li class="paginate_button active"> 
     <a href="#" aria-controls="crfTable" data-dt-idx="1" tabindex="0">1</a> 
     </li> 
     <li class="paginate_button next disabled" id="crfTable_next"> 
     <a href="#" aria-controls="crfTable" data-dt-idx="2" tabindex="0">Next</a> 
     </li> 
    </ul> 
    </div> 
    </div> 
</div> 

Einschließlich Ihrer Einstellung für Marge werden Sie 20px 0 überschrieben sein von Bootstrap