Different labels set font-size, causing the label height to change

Setting font-size in the li tag and the a tag causes the height of the li tag to be inconsistent (the browser is Google Chrome)

1. atag

I wrote font-size in the a tag

html file

 <div class="banner">
     <div class="wrapper">
         <div class="left">
             <ul>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
                 <li><a href="#">HTML DEVELOP<span>></span></a></li>
             </ul>
         </div>
     </div>
 </div>

css file

.banner .left {
 float: left;
 padding: 13px 21px 13px 20px;
 width: 190px;
 height: 420px;
 background-color: rgba(0,0,0,.3); 
}

.banner .left li {
 line-height: 44px;
}

.banner .left a {
 font-size: 14px;
 color:#fff;
}

In this case, the height of the li tag is 45px instead of 44px

the wrong situation

2. li tag

I wrote font-size in the li tag

css file

.banner .left {
 float: left;
 padding: 13px 21px 13px 20px;
 width: 190px;
 height: 420px;
 background-color: rgba(0,0,0,.3);
}
.banner .left li {
 line-height: 44px;
 font-size: 14px;
}

.banner .left a {
 color:#fff;
}

And in this case, the height of the li tag is 44px, which is the correct height

the right situation

So please what is causing this, I can't figure it out