inline-flex 徽标创建了奇怪的不需要的填充（里面有 CodePen）

Question

我正在制作一个 header，其中包含一个 SVG 徽标和一个 h1 标题。

使用 flex 会使可点击区域过长。使用 inline-flex 使可点击区域与两个项目的宽度一样长。

使用 inline-flex 时，SVG 徽标底部有一个小填充。尝试将 inline-flex 更改为 flex!

知道如何删除那个小填充吗？

HTML

<header>
    <div class="header-inner">
        <a href="https://example.org/" class="brand-anchor">
            <svg class="logo" viewBox="0 0 120 120">
                <rect width="120" height="120" style="fill: orange;" />
            </svg> 
            <h1 class="brand">Brand</h1>
        </a>
    </div>
</header>

CSS

header {
    font-family: Arial, sans-serif;
    background: gray;
    color: #fff;
}

.header-inner {
    margin: 0 auto;
    max-width: 800px;
}

.brand-anchor {
    align-items: center;
    display: inline-flex;
}

a.brand-anchor:link, a.brand-anchor:visited {
    color: #fff;
    text-decoration: none;
}

.logo {
    height: 40px;
    margin-right: 20px;
    width: 40px;
}

.brand {
    font-size: 2rem;
    margin: 0;
}

谢谢！ :)

Answer 1

这与 display: inline 的问题相同。
可以通过在父项上添加 font-size: 0 来避免这个恼人的差距：

.header-inner {
  margin: 0 auto;
  max-width: 800px;
  font-size: 0;
}

inline-flex 徽标创建了奇怪的不需要的填充（里面有 CodePen）

inline-flex logo creates weird unwanted padding (CodePen inside)

html

css

svg

flexbox