inline-flex徽标会产生奇怪的不需要的填充（CodePen里面）

Question

我正在处理包含SVG徽标和h1标题的标题。

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

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

任何想法如何删除那个小填充？

http://codepen.io/dash/pen/vEqGNb

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;
}