Navbar hover effect no longer works when I insert a image - html

Question

I have a navbar inside a header tag. the header tag is flex. the navbar too. in the navbar i have three a tags with the display value inline-block; and a padding in the height and width. So far so good. When i hover the links the hover effect is shown over the whole height.
The problem: If I add an image to the first link, I can't make the image higher than 10 px because the padding affects the entire navbar height. What I do not want.
Question: How can I add the image to the link without it affecting the height of the navbar?
My code
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
  margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<div class="flex">
<div>
<img src="https://via.placeholder.com/30">
</div>
<div>10000</div>
</div>
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>
expected
body {
margin: 0;
pading: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: center;
}
.navbar a:not(:first-child) {
display: inline-block;
}
.navbar a {
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
  margin-top: 180px; /* Add a top margin to avoid content overlay */
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
xca
</main>
</div>

Answer 1

Use flex behavior to align and stretch instead of additional markups
In the code snippet below, I removed the extra markup in the first a element that contains the img. Instead, I made all a tags display: inline-flex and removed vertical padding in the first one. Then, using the parent nav element's align-items property, I ensured each a tag has the same full height for consistent hover effect.
body {
margin: 0;
padding: 0;
}
header {
display:flex;
justify-content: space-between;
align-items: center;
background: green;
position: fixed;
top: 0;
overflow: hidden;
width:100%;
}
.logo {
background: yellow;
display: flex;
align-items: center;
}
.navbar {
background-color: #333;
display: flex;
align-items: stretch;
}
.navbar a {
display: inline-flex;
}
.navbar a {
color: #f2f2f2;
justify-content: center;
align-items: center;
padding: 14px 16px;
text-decoration: none;
font-size: 12px;
}
.navbar a:first-of-type {
padding-top:0;
padding-bottom:0;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.flex {
gap:10px;
display: flex;
align-items: center;
font-size: 12px;
}
.main {
  margin-top: 180px;
color: color;
height:50vh;
background: black;
}
<div>
<header>
<div class="logo">
<img src="https://via.placeholder.com/40">Logo
</div>
<nav class="navbar">
<a href="#home">
<img src="https://via.placeholder.com/30">
10000
</a>
News
Contact
</nav>
</header>
<main class="main">
text
</main>
</div>