Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row.
After leaving my project untouched for a few days, I encountered some bugs upon revisiting it this morning. Fortunately, most of them have been resolved (such as an excessive page width issue fixed by adding 'overflow-x: hidden' to the body). However, a new problem has surfaced - there is unexpected white space above the paragraph element inside the '.help-box'.
I am unsure about the root cause of this issue. If you have a moment, please take a look at the JSFiddle I created:
https://jsfiddle.net/alecbach/7j6b6xn2/5/Below is the CSS code for the .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
}
}
(Please disregard the script errors; they occur due to the script loading before Google Maps and JQuery. They do not impact the site's functionality)
Edit: Attached below is a GIF demonstrating the white space issue:
https://gyazo.com/96410bb189104af914fd921c1d12fa56