Html 相对块div高于内容-无法解释的空白

我正在开发一个简单的表单，当用户将鼠标悬停在帮助框所在的行上时，会显示纯css帮助框

我有几天没有打开我的项目，当我今天早上打开它的时候，有一些bug，大部分已经修复。通过在正文中添加“overflow-x:hidden”等修复了页面宽度过大的问题，但当前的问题是在“.help”框中的p元素上方添加了空白

我不确定是什么原因造成的，如果您有时间，请查看我创建的JSFIDLE：

以下是.help框的CSS：

.help-cont{
    display: block;
    position: relative;
    opacity: 0;
    left: 10px;
    height: 0px;
    width: calc(100% - 8px);
    top: -56px;
    margin-top: 9px;
    transition: opacity 0.3s ease-in-out, margin-top 0.3s ease-in-out;
    .help-box{
        position: relative;
        top: 12px;
        padding: 12px;
        border: 1px solid lightgray;
        border-radius: 5px;
        background-color: white
    }
}

忽略脚本错误，这只是在GoogleMaps和jquery之前加载的脚本。它们不会影响站点的状态

编辑：这是显示空白的gif：

添加位置：绝对位置；to.help cont而不是relative。通过使用relative，它考虑到了其他元素的流动，并将文本向下推

---

试试看，效果不错。然后，它只有p元素的边距底部，这很容易分类，使其在所有边上都均匀。

完美！谢谢你的解释。