Product Landing Page - Centering <p> element in navbar

#1

I am working on my own version of the product Landing Page. I am trying to create a kind of navbar/ribbon in the fold of the page like this:

Screenshot from 2020-09-26 11-35-10
Screenshot from 2020-09-26 11-35-101843×514 173 KB

I have a div that has a p element floated left and a button floated right:

HTML:

<div class="fold">
            <p>Powering Over 2 Million Websites Worldwide!</p>
           <!-- <button>See Features!</button> -->
</div>

CSS:

.fold{
    height: 70px;
    background: #95bc33;
    color: white;
    overflow: hidden;
    margin: 0;
}
.fold p{
    width: 650px;
    float: left;
    font-size: 30px;
    font-family: Loma;
    margin: 20px 0;
    padding: 0;
}
.fold button{
    float: right;
    height: 40px;
    font-family: Loma;
    font-size: 14px;
    padding: 5px 25px;
    color: white;
    background: #95bc33;
    border: 1px solid white;  
}

I want to have the font size of the

element set to 30px with 20px of margin on top and bottom to center the text vertically. For some reason when I inspect it with developer tools, the element is 47px tall even though the font size is 30px and padding 0:

Screenshot from 2020-09-26 11-40-33
Screenshot from 2020-09-26 11-40-331914×699 140 KB

Any reason the element would have this height? box-sizing is set to border-box.

#2

Hey Raymond!

It would be awesome to see a (working) example of your project on codepen, so that we can fiddle around with it.

What happens when you change the line-height of the text to 1?

#3