相対ブロックのdiv - 。原因不明の空白

Question

私は、ユーザーがヘルプボックスがであることを行の上に置いたときに表示される純粋なCSSのヘルプボックスに簡単なフォームに取り組んでいます

私は自分を開けませんでした私が今朝オープンしたときには、いくつかのバグがありました。ほとんどのバグは修正されました。 （余分なページ幅は理由なしで 'overflow-x：hidden'をbodyに追加することで修正されました）しかし、現在の問題はp要素の上に '.help-box'の中に空白が追加されていることです。

私はあなたが時間を持っている場合は、私が作成したので、このJSFiddleを見てください、それを引き起こしているかわからないんだけど：
https://jsfiddle.net/alecbach/7j6b6xn2/5/

ここでは、.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 
    } 
} 

（GoogleマップとjQueryを持って前に、それだけでスクリプトの読み込みだ、スクリプトエラーを無視し、彼らは、サイトの状態は影響しません。）

を編集：ここではGIF SHがありますホワイトスペースを起因：
https://gyazo.com/96410bb189104af914fd921c1d12fa56

Answer 1

はposition: absolute;に.help-cont代わりの相対を追加します。相対的な使用は、他の要素の流れを考慮に入れ、テキストを押し下げます。

試してみてください。それはちょうどp要素のマージンの底を持っていて、すべてのエッジの周りでそれを整理するのに十分簡単です。