div元素悬停时如何删除多余的空间？ [关闭]答案

【问题标题】：How to remove extra space when div element is hover? [closed]div元素悬停时如何删除多余的空间？ [关闭]
【发布时间】：2021-04-08 06:46:49
【问题描述】：

我想在这里实现的是当用户将鼠标悬停在每个“.child”元素上然后转换比例并显示“.toggle”元素但保持同级元素的高度。问题是兄弟元素扩展并在下图中显示了空白空间。纯CSS如何实现？

更新：我现在通过在悬停时添加一个内部 div 包装元素解决了这个问题，内部将是绝对位置。

【问题讨论】：

.toggle > p { 边距：0; /*设置你的填充*/ }
你能把你的答案再扩展一点吗？
是的，当然。默认情况下，浏览器有默认的段落样式。例如，body 元素也是如此。这就是为什么开发人员通常使用重置样式来重置浏览器添加到元素的这些默认样式。
元素从浏览器获取默认样式，其中之一是边距。因此设置 margin: 0 会重置浏览器添加的 p 元素的默认样式。您可以设置所需的填充以保持与以前相同的样式。
例如开发人员使用 reset.css meyerweb.com/eric/tools/css/reset 或者他们创建自己的重置文件。如果您看到 p 元素设置有边距：0;填充：0;
感谢您提供的信息，我更新了我的 codesanbox 演示以删除每个切换类元素上的 p 标签，只是为了表明我的问题与显示属性有关而不是边距。

【解决方案1】：

如果你只想保持兄弟元素的高度，那么添加这个 CSS

.parent {
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

但是，您仍然可以看到红色背景。为此，您需要设置带有位置的“.toggle” div。

【讨论】：

我忘了说我在本地机器上的实际代码已经有 flex-wrap 和 align-items 了。我更新了照片以供参考。我认为我的问题是悬停在上面有额外的空间。
现在，你只需要更新这个 CSS， .child:hover {transform: scale(1.5);position: relative; z-index: 1;}.child:hover > .toggle {display: block;height: auto;position: absolute;left: 0;} 请让我知道这是否有效。谢谢