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>>Solution :
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>