Relative Block div größer als Inhalt -. Unerklärlicher Leerraum

Question

ich auf einer einfache Form mit reinen CSS-Hilfe-Boxen arbeite, die angezeigt werden, wenn der Benutzer über die Reihe schwebt, dass die Hilfe-Box in ist

ich nicht riss Projekt für ein paar Tage, und als ich es heute Morgen öffnete, gab es ein paar Bugs, die meist behoben wurden. (übermäßige Seitenbreite ohne Grund, behoben durch Hinzufügen von 'overflow-x: hidden' zu body, etc) Aber das aktuelle Problem besteht darin, dass oberhalb des p-Elements in '.help-box' Leerraum hinzugefügt wird.

Ich bin nicht sicher, was es verursacht, wenn Sie Zeit haben Sie einen Blick auf diese JSFiddle haben, dass ich geschaffen habe:
https://jsfiddle.net/alecbach/7j6b6xn2/5/

Hier ist die CSS für die .help-Box:

.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 
    } 
} 

(die Skriptfehler ignorieren, es ist nur das Skript Laden vor google Maps und jquery haben sie haben keinen Einfluss auf den Zustand der Website.)

Edit: Hier ist ein gif sh den weißen Raum wegen:
https://gyazo.com/96410bb189104af914fd921c1d12fa56

Answer 1

hinzufügen position: absolute; zu .help-contstattrelativ. Durch die Verwendung von relativ berücksichtigt es den Fluss anderer Elemente und drückt den Text nach unten.

Versuchen Sie das und es funktioniert. Es hat dann nur den Rand des p Elements, das leicht genug ist, um alle Kanten gleichmäßig zu machen.