ナビゲーションの文字以外の場所をクリックしても反応しません。

それはaタグがインライン要素のままで、コンテンツの幅しか持っていないからです。CSSで display: block を指定するか、Flexboxを使用して aタグ自体のサイズを広げることで解決します。

カード全体をクリックできるようにしたい場合、どうすればいいですか？

モダンな解決策として、aタグの疑似要素（ ::after ）に position: absolute をかけ、親要素いっぱいに広げる手法（Stretched Link）がおすすめです。HTML構造を汚さずに <a href="https://ginneko-atelier.com/blog/entry181/?data_structure=faq#%E3%81%8A%E5%9B%B0%E3%82%8A%E3%81%94%E3%81%A83%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E7%AF%84%E5%9B%B2%E3%82%92%E7%B8%A6%E6%96%B9%E5%90%91%E3%81%AB%E3%82%82%E5%BA%83%E3%81%92%E3%81%A6%E6%96%87%E5%AD%97%E4%BD%8D%E7%BD%AE%E3%82%92%E7%B8%A6%E6%A8%AA%E6%96%B9%E5%90%91%E7%9C%9F%E3%82%93%E4%B8%AD%E3%81%AB%E9%85%8D%E7%BD%AE%E3%81%97%E3%81%9F%E3%81%84">クリック範囲を最大化できます。

画像の下に謎の数ピクセルの隙間ができてしまいます。

画像（imgタグ）がインライン要素であり、アルファベットの「ベースライン」を基準に配置されているためです。CSSで vertical-align: bottom を指定すれば隙間をピタリと消すことができます。

Flexboxを使っても、aタグ内の文字が上下中央に配置されません。

aタグ自身に display: flex をかけ、 align-items: center を指定しているか確認してください。親のliタグではなく aタグ側にプロパティをセットするのが、当たり判定を広げつつ中央寄せにするコツです。

aタグのクリック範囲を広げる｜CSSで当たり判定のズレを直す方法

FAQ

ナビゲーションの文字以外の場所をクリックしても反応しません。: それはaタグがインライン要素のままで、コンテンツの幅しか持っていないからです。CSSで display: block を指定するか、Flexboxを使用して aタグ自体のサイズを広げることで解決します。

カード全体をクリックできるようにしたい場合、どうすればいいですか？: モダンな解決策として、aタグの疑似要素（ ::after ）に position: absolute をかけ、親要素いっぱいに広げる手法（Stretched Link）がおすすめです。HTML構造を汚さずにクリック範囲を最大化できます。

画像の下に謎の数ピクセルの隙間ができてしまいます。: 画像（imgタグ）がインライン要素であり、アルファベットの「ベースライン」を基準に配置されているためです。CSSで vertical-align: bottom を指定すれば隙間をピタリと消すことができます。

Flexboxを使っても、aタグ内の文字が上下中央に配置されません。: aタグ自身に display: flex をかけ、 align-items: center を指定しているか確認してください。親のliタグではなく aタグ側にプロパティをセットするのが、当たり判定を広げつつ中央寄せにするコツです。