我有一个导航栏内的标题标签。标题标签是灵活的。导航栏太。在导航栏中，我有三个标签与显示值内联块;和填充的高度和宽度。到目前为止一切顺利。当我悬停链接的悬停效果显示在整个高度。

• • 问题：**如果我在第一个链接上添加一个图片，我不能使图片高于10像素，因为填充会影响整个导航栏的高度。
• • 问题：**如何将图像添加到链接而不影响导航栏的高度？
• • 我的密码**

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>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>    
    </nav>    
  </header>

  <main class="main">
    text
  </main>
</div>

• • 预期**

一个二个一个一个