<Pre> rendering difference between Firefox and Chrome

I am working on a guitar chord app and the problem is Firefox is not rendering paragraphs as expected.

Firefox is render p tags with extra space on both bottom and top. There is no padding, nor margin. Firefox says there is just "gap" between the elements. I am super surprised... Please note that I have highlighted two sibling p elements, and the there is nothing between them. Here is my structure:

    p {
        margin: 0; padding: 0;    
    }

<pre>
    <section style="inline-block">(Song metadata, you can see example in the screenshot)</section>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    <p>chords</p>
    <p>a line of lyrics</p>
    ...
</pre>

Expected (from Chrome):

Firefox:

Firefox screenshot, p element boundaries

I tried those:

• Changing margin,padding of the both pre and p elements
• Changing display css prop on both elements
• Setting p's style to line-height: 0.6em works, but it is not a solution.

#EDIT 1: Forgot to add stylesheet. btw, there is no margin, nor padding. I added image to show boundary of p element.

#EDIT 2: Added what I've tried