为什么溢出：隐藏添加填充/边距？答案

【问题标题】：Why does overflow: hidden add padding/margin?为什么溢出：隐藏添加填充/边距？
【发布时间】：2018-06-06 01:57:24
【问题描述】：

我今天遇到了一件很奇怪的事情。将样式 overflow: hidden 添加到 div 时，如果其内容有标题，它会获得一些额外的空白空间，看起来像边距或填充。数量很少，所以我通常不会注意到或关心，但问题是我正在制作动画，而边距/填充把它搞砸了。几个小时以来，我一直认为是动画出了问题，但我终于设法缩小到这个范围。

这是有溢出的代码：

<div style="overflow:hidden">
    <ng-content select="wizard-step"></ng-content>
</div>

ng-content 呈现这个：

<h5><strong>testing bootstrap header</strong></h5>
<search-select #select [placeholder]="'Busca audiencias...'" (selected)="onSelected($event); select.text = ''" [template]="template" property="name" [items]="catalogAudiences | filterAudiences:audiences"></search-select>
<div class="mt-3">
    <div *ngIf="!audiences?.length" class="alert alert-primary">
        No has agregado audiencias.
    </div>
    <audiences-list (remove)="onRemove($event)"  [readOnly]="true" [audiences]="audiences"></audiences-list>
</div>

它看起来像这样：

我希望您注意我所说的显示额外空间的箭头。比较一下，如果我删除 style="overflow:hidden"，这就是它的样子：

我知道这可能很难说，但这几乎就像只要 div 有overflow: hidden，“测试引导标头”就会得到一些不需要的边距，这会弄乱我的动画。我该如何解决这个问题？

如果有帮助的话，我正在使用 Bootstrap 4 和 Angular 5。

【问题讨论】：

如果您检查元素，您会在容器和内部 div 上看到哪些其他 CSS 属性？特别是位置，显示，浮动？我的预感是溢出属性以意想不到的方式扰乱了堆栈上下文。
@cheryllium，我试过了，但我找不到任何不寻常的地方。在 CSS 方面我不是最好的，所以我不知道要寻找什么，但无论如何。经过更多测试，我还注意到这似乎只影响标题（在这种情况下为
）。如果我删除该元素，则不会发生任何错误，不会添加额外的空间。其他标签也可能发生这种情况，但这就是我到目前为止所得到的。
你能分享这些属性上的其他 CSS 吗？

标签： css angular bootstrap-4

【解决方案1】：

很有可能，h5（“测试引导标头”）具有来自浏览器默认设置或 Bootstrap 的上边距，这会受到 div 的 overflow: hidden 的影响（这会导致它建立一个块格式化上下文来阻止子边距与其父边距折叠）。请参阅规范中的collapsing margins。

如果删除上边距可以解决这个问题，那就是您的答案。

【讨论】：

我对@987654322@ 得出了类似的结论。 body 元素的上边距似乎与 h5 元素的边距一起折叠。据我在这种情况下所见，去除身体的边缘可以解决问题。
是的，这行得通。有没有一种方法可以使内容块边距一直折叠而不会溢出：隐藏？这样至少不会引起注意。基本上我需要溢出：在滑入/滑出动画期间隐藏，但是一旦它被移除，额外的边距也会被移除，你马上就会知道动画的结尾看起来多么不自然。所以现在我希望能够禁用折叠边距，即使没有溢出：隐藏。从引导标头中删除上边距并不是一个真正的选择，因为这应该是一个包含任何内容的可重用组件。
我设法通过在ng-content 之前和之后插入它来修复它：<div style="overflow: hidden; height: 0px; width: 0px;">.</div> 它可以工作并且动画现在看起来不错，但是伙计，这很难看，感觉就像一个黑客。你认为有更好的方法吗？
@Christian - 正如this answer 中的建议和this jsfiddle 中所示，您可以通过在 div 容器上设置 display: inline-block; 来禁用边距折叠（但它可能会在您的布局中产生副作用)。

）。如果我删除该元素，则不会发生任何错误，不会添加额外的空间。其他标签也可能发生这种情况，但这就是我到目前为止所得到的。