html - div 高度调整不包括其内容的边距

Question

我有一个里面有表格的 div。该表通过应用表类使用 Bootstrap 设置样式。默认情况下，bootstrap 中的表格底部边距为 20px。

我的 div 将其高度调整为表格的可见内容，但不包括表格的边距。

我想用左边框设计 div 的样式，让多个 div 彼此重叠，并带有连续边框。但由于表格的(不可见的)边距，始终存在间隙。

这是一个简化示例的 fiddle :http://jsfiddle.net/bj13hez3/2/

html:

<div>
<table class="table">
    <tr>
        <td>some</td>
        <td>table</td>
        <td>content</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</div>
<div>
<table class="table">
    <tr>
        <td>some</td>
        <td>other</td>
        <td>table</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tr>
</table>
</div>

CSS:

div { border-left: 2px solid #d7d7d7; }

如果我在 div 的所有边上放置一个边框，高度接缝会正确调整到表格，包括它的边距。我可以做类似的事情

div { border: 2px solid transparent;
      border-left: 2px solid #d7d7d7;}

但是对应于顶部/底部边框的 div 之间会有一个 2px 的小间隙。 后来我只想在悬停/鼠标悬停时显示边框，这对我来说可能是一个解决方案(2px 可能不会引起别人的注意)但它并不是很好。

如何使我的 div/border 具有完整内容的高度？

Answer 1

要包含子项的边距，您需要添加overflow: hidden。对此的可能解释如下。

此问题的几种可能解决方案包括:

div { border: 2px solid transparent;
      overflow: hidden;}

div table {display: block;}

浏览器总是用附近的边距折叠边距。当您提供 overflow: hidden 时，它会计算其盒模型内的所有内容，并使其限制在内容范围内。

抱歉我的笔迹太脏了...

这也是 float 的情况。 float 元素不占用任何空间。看看这里:

div {padding: 5px; border: 1px solid #666;}

<div>
  <div style="float: left;"></div>
</div>

但是同样的事情，如果父级有一个overflow: hidden，它就不会发生:

div {padding: 5px; border: 1px solid #666;}

<div style="overflow: hidden;">
  <div style="float: left;"></div>
</div>

这里有一整篇关于这个概念的大文章:What You Should Know About Collapsing Margins . overflow 是一个非常强大的属性，它适用于所有情况。但是当涉及到position时，你需要小心使用它!

position 的工作方式类似于float，两者都不采用布局。例如，请参阅以下代码段:

div {padding: 5px; border: 1px solid #666;}

<div>
  <div style="position: absolute;"></div>
</div>

哪里，如果你玩错了:

div {padding: 5px; border: 1px solid #666;}

<div style="overflow: hidden; position: relative;">
  <div style="position: absolute;"></div>
</div>

上面的内容被删减了。希望清楚。