How can I increase my texts font-size over hovering without increasing the parent elements size too-CodePudding

I am new to programming and I ran into a problem when I want to increase my texts font-size over hovering, the parent elements size is also changing. please somebody help me how can i stop that background size change and leave the moving effect between the navbar options. And I am curious how to stop the moving effect of the neighbour elemnts too.

 nav{
        padding:20px;
        overflow:hidden;
    background-color: #eee;
    }
    nav a{
        
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
        transition-delay: 0s;
        float:right;
        text-decoration:none;
        color:black;
        font-family:"Goudy Old Style";
        text-align: center;
        padding:0px 14px 0px 14px;
    }
    nav a:hover{
        color:#b3d0ff;
        font-size:19px;
    }
    #logo{
        float:left;

    }

<nav>
    <a id="logo" href="index.html">BLA BLA</a>
    <a href="contact.html">CONTACT</a>
    <a href="portfolio.html">PORTFOLIO</a>
    <a href="about.html">ABOUT</a>
    <a href="index.html">HOME</a>
 </nav>

CodePudding user response：

To answer why the parent element is also increasing in size, this is going to be due to the line-height property. With its default value (auto), the bigger the font, the more space the text will take up, thus making the parent element also increase in size.

By having a set line-height, you can avoid the text taking up more space, regardless of what the font size is.

 nav{
        padding:20px;
        overflow:hidden;
    background-color: #eee;
    }
    nav a{
        line-height: 19px;
        transition-property: all;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
        transition-delay: 0s;
        float:right;
        text-decoration:none;
        color:black;
        font-family:"Goudy Old Style";
        text-align: center;
        padding:0px 14px 0px 14px;
    }
    nav a:hover{
        color:#b3d0ff;
        font-size:19px;
    }
    #logo{
        float:left;

    }

<nav>
    <a id="logo" href="index.html">BLA BLA</a>
    <a href="contact.html">CONTACT</a>
    <a href="portfolio.html">PORTFOLIO</a>
    <a href="about.html">ABOUT</a>
    <a href="index.html">HOME</a>
 </nav>