Html Div大于其内容

我试图将内容放在这个datatables分页控件下面，但是div比它的内容大。这会将我的内容向下推得比我想要的更远

我一直在chrome和firefox调试器中寻找导致这种情况的样式，但它只是说元素的高度是43像素，而不是38像素（ul的34像素，上下两个边距）

有没有想过是什么原因造成的？为什么它会失去收缩包装效果

---

我已经尝试将inline和inline块添加到容器div中，最大高度为38，但是没有任何东西可以删除额外的5px。

首先，对于

col-sm-6 col-md-6 pt-3

div，您需要删除该

display:inline

。对于

ul.分页

设置为

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>

禁用下一步分页按钮“id=“crfTable\u next”>

---

包括您的边距设置，您将首先从引导覆盖

col-sm-6 col-md-6 pt-3

div的

20px 0

。对于

ul.分页

设置为

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>

禁用下一步分页按钮“id=“crfTable\u next”>

---

包括您的边距设置，您将覆盖引导中的

20px 0

您应该编写如下内容

行高

属性定义内联元素上方和下方的空间量

---

你应该写如下

行高

属性定义内联元素上方和下方的空间量

---

这并没有解决问题。不过，你的思路是对的。我返回并将行高度应用于div.dataTables而不是ul，这解决了它。在

上有相同的问题。从中选择size control

div。div的高度比其含量大5 px。

行高

技巧奏效了！谢谢这并没有解决问题。不过，你的思路是对的。我返回并将行高度应用于div.dataTables而不是ul，这解决了它。在

上有相同的问题。从中选择size control

div。div的高度比其含量大5 px。

行高

技巧奏效了！谢谢这移除了额外的空间，但ul边距堆积在ul元素上方。不过我可能可以这样做。你的

maring:2px 0

on.pagination消除了很大的间隙。是的，它将边距从20减少到2，但是display:block将ul从边距中拉出，因此你不再看到底部边距，因为它与ul元素重叠。我必须将2px边距覆盖为0，并将边距应用于div，这可能很好。我们将看到这删除了额外的空间，但ul边距堆积在ul元素之上。不过我可能可以这样做。你的

maring:2px 0

on.pagination消除了很大的间隙。是的，它将边距从20减少到2，但是display:block将ul从边距中拉出，因此你不再看到底部边距，因为它与ul元素重叠。我必须将2px边距覆盖为0，并将边距应用于div，这可能很好。我们拭目以待

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

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