a要素に不明の上下余白が入る

Question

a要素の上下に微妙なスペースが入ってしまう問題が解決できません。

【li要素のみの場合】

【liの中にaがある場合】

liとaのフォントサイズ は22px、line-height:1です。
li要素のみの場合は、高さ22pxとなりますが、
li>aとした場合は、32.5pxとなっています。

アドバイスいただけませんでしょうか。

■html

	<header class="header">
		<div class="container">
			<div class="logo">
				<a href="index.html"><img src="img/logo_02.svg" alt=""></a>
			</div>
			<nav class="nav">
				<ul>
					<li><a href="">トップ</a></li>
					<li><a href="">ナビ2</a></li>
					<li><a href="">ナビ3</a></li>
					<li>ナビ4</li>
					<li><a href=""><i class="fas fa-envelope"></i>CONTACT</a></li>
					<li><a href=""><i class="fas fa-file-alt"></i>お見積り</a></li>
				</ul>
			</nav>
		</div>
	</header>

■CSS

//リセット
a {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* サイズの基準： 1rem = 100px */
:root {
	font-size: 100px;
}


//ナビCSS
.nav ul {

	display: flex;
	align-items: center;

    li {
        font-size: 0.22rem;
        line-height: 1;
        font-weight: 500;

        a {
            vertical-align: middle;
            font-size: 0.22rem;
            line-height: 1;
        }
    }
}

Comments

[yambejp]

ご提示のCSSでは表示がくずれて画像のようにはなりません
codepenなどどこか再現できるサイトにアップできませんか？

[m.ts10806]

scssであればそのままコピペで確認ができないのでコンパイル後のcssを提示してください

[skys215]

開発者ツールで各CSSを比べれば答えが出てくると思います。

[webserviceNI]

回答ありがとうございます！
解決できました。

Answer 1

アセンダー・ディセンダーの影響かと思います。
手っ取り早く解決するには、a要素をdisplay: blockにしてみてください。
（インラインブロックでも高さのずれの問題は解決すると思いますが、行ボックスのずれ自体は解決しないと思います。）

参考：

It becomes obvious that setting line-height: 1 is a bad practice.

Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira

Comments

[webserviceNI]

回答ありがとうございます。
記事ざっとみさせてもらいました。

わかる部分とわからない部分もあり、ざっくりですが、、
インライン表示ではフォントの余白部分が反映されてしまうということでしょうか
記事では、`line-height: 1`を指定するとこの問題が生じる？
というふうに書いてあるようにも読めたのですが、、

本問題もブロック指定で解決できました！
ありがとうございます。

https://codepen.io/reo_reopon/pen/gOGgyoY?editors=1100