图像右边有不可见的边距

Question

问题：

该图像将文本一直推到右侧的“此处的其他内容”。 这是由于我调整图像大小而引起的。 我希望“此处的其他内容”文本直接位于“品牌”文本的右边。 我认为这是由于我调整图像大小而引起的。

小提琴： https : //jsfiddle.net/99c2wxL5/2/

HTML：

<header class="header">
    <nav class="navbar">
        <a class="navbar-brand" href="/index.php">
            <img src="http://i.imgur.com/6ZjLmn4.png" class="navbar-brand-image" alt="">
            <span>Brand</span>
        </a>
        <div>
            Other stuff here
        </div>
    </nav>
</header>

CSS：

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  flex-direction: row;
  align-content: center;
  background: #333333;
  padding: 0.25rem 0.5rem;
  height: 50px; 
}

.navbar-brand {
  margin-right: 1rem;
  white-space: nowrap;
  font-size: 25px;
  display: flex;
  align-items: center;
  font-family: "Oswald", sans-serif;
  color: #ead911;
  text-decoration: none; 
}

.navbar-brand-image {
  display: block;
  height: 90%;
  width: auto;
  margin-right: 6px; 
}

我试过的

我在互联网上阅读过，这是由于图像是嵌入式元素所致。 我试图给它显示：块； 但这并没有改变任何东西。 Display flex也没有任何改变。

我尝试过的其他解决方案是float:left ， vertical-align 0和line-height 0 ，这些都无济于事。

为图像设置宽度会有所帮助，但我不希望对图像的宽度进行硬编码，因为将来图像可能会更改。

Answer 1

您是否有特定的原因使用display: flex ？ 我认为这是造成您的问题。 参见https://jsfiddle.net/zz9fta8g/1/ 。

• 移除display: flex
• “在这里的其他东西”设定<div>到display: inline-block
• 移除display: block .navbar-brand display: block
• 将.navbar-brand-image为vertical-align: middle

Answer 2

如果在.navbar-brand添加宽度，是否有任何问题

.navbar-brand {
  margin-right: 1rem;
  white-space: nowrap;
  font-size: 25px;
  display: flex;
  align-items: center;
  font-family: "Oswald", sans-serif;
  color: #ead911;
  text-decoration: none; 
  width:120px;
  }

愿它对您有帮助。