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

Question

我有一个 div，里面有一张桌子。该表通过应用表类使用 bootstrap 进行样式设置。默认情况下，bootstrap 中的表格的 margin-bottom 为 20px。

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

我想用左边框设计 div，让多个 div 彼此重叠，并带有连续边框。但由于表格的（看不见的）边距，总是存在间隙。

这是一个简化示例的小提琴： 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

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

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

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

div table {display: block;}

浏览器总是将边距与附近的边距折叠起来。当您给出 时overflow: hidden，它会计算其盒模型内的所有内容并使其限制于内容。

抱歉我的字写得太快了……

s也是同样的情况float。浮动的项目不占用任何空间。看看这里：

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

div table {display: block;}

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

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

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

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

关于这个概念的一整篇大文章在这里：关于折叠边距你应该知道什么。这overflow是一个非常强大的属性，它适用于一切。不过使用的时候position一定要慎重！

作品position与 、 一样float，两者都不采取布局。例如，请参阅下面的代码片段：

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

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

如果你以错误的方式玩它：

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

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

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