相对块格比含量高 - 不明原因的空白

我是一个简单的形式，当用户将鼠标悬停在该帮助框是行出现纯CSS帮助盒上工作相对块格比含量高 - 不明原因的空白

我没有打开我的项目几天，当我今天早上打开它时，出现了一些错误，这些错误大多已被修复。（没有理由的页面宽度过大，通过在body中添加'overflow-x：hidden'等来修复）但是目前的问题是'.help-box'内的p元素上方增加了空格。

我不知道是什么原因造成的，如果你有时间请看看这的jsfiddle我创建：
https://jsfiddle.net/alecbach/7j6b6xn2/5/

下面是。帮助框的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 
    } 
}

（忽略脚本错误，它只是脚本加载之前，谷歌地图和jQuery有他们不作用位点的状态。）

编辑：这是一个GIF SH由于白色空间：
https://gyazo.com/96410bb189104af914fd921c1d12fa56

来源

2017-03-22 Alec Bach

添加相对position: absolute;到.help-cont而不是。通过使用相对它考虑到其他元素的流量并推下文本。

试试看，它的工作原理。然后，它只有p元素的边距底部，该元素很容易进行整理，以便在所有边缘都可以完成。

来源

2017-03-22 22:02:21

完美！感谢您的解释。 –

相对块格比含量高 - 不明原因的空白

回答

相关问题