Html 当div元素悬停时，如何删除额外的空间？

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

---

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

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

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

---

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

.toggle>p{margin:0；/*设置您的padding*/}您可以将答案再扩展一点吗？可以。默认情况下，浏览器具有段落的默认样式。例如，body元素也会发生同样的情况。这就是为什么开发人员通常使用重置样式来重置浏览器添加到元素中的这些默认样式 元素从浏览器中获取默认样式，其中之一是边距。因此，设置margin:0将重置浏览器添加的p元素的默认样式。您可以设置所需的填充以保持与以前相同的样式。例如，开发人员使用reset.css或创建自己的reset文件。如果您看到p元素被设置为有边距：0；填充：0；感谢您提供的信息，我更新了我的codesanbox演示，删除了每个toggle类元素上的p标记，只是为了表明我的问题与显示属性而不是边距更相关。我忘了提到我在本地计算机上的实际代码已经有flex wrap和align项。我更新了照片以供参考。我想我的问题是悬停，上面有额外的空间。现在，你只需要更新这个CSS，.child:hover{transform:scale（1.5）；position:relative；z-index:1；}.child:hover>.toggle{display:block；height:auto；position:absolute；left:0；}请告诉我这是否有效。谢谢