我有一个基于CSS表格的工具栏。一切都很好，直到有必要在那里添加带有图片的按钮。由于某种原因，在添加标记时，工具栏的高度会增加（尽管它是以像素为单位设置的），没有图像的按钮会向下移动。

.toolbar {
      display: table;
      height: 50px;
      background-color: #ccf;
      border-collapse: collapse;
    }
    
    .toolbar-button {
      display: table-cell;
      padding: 0 15px;
      line-height: 50px;
      border: solid 1px black;
    }
    
    .imgbutton-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .imgbutton-container > img {
      margin-right: 10px;
    }

<h2>Without &lt;img&gt;:</h2>

  <div class="toolbar">
    <a href="#" class="toolbar-button">
      <div class="imgbutton-container">
        button 1
      </div>
    </a>
    <a href="#" class="toolbar-button">
      button 2
    </a>
  </div>

<h2>With &lt;img&gt;:</h2>

  <div class="toolbar">
    <a href="#" class="toolbar-button">
      <div class="imgbutton-container">
 <img src="https://www.google.com/favicon.ico" /> 
        button 1
      </div>
    </a>
    <a href="#" class="toolbar-button">
      button 2
    </a>
  </div>

使用开发者工具，你可以看到图像的大小，甚至整个容器的大小都足以将它们放入单元格中，而不需要扩展它，但由于某种原因，它仍然会扩展。
你能解释一下为什么会发生这种情况以及如何避免这种行为吗？