各リストの間隔を狭くしたい

Question

前提・実現したいこと

各リストの間隔を狭くしたいのですが、a要素の高さとli要素の高さが一致しないため困っています。
li要素とa要素の高さを合わせて、間隔を狭くするにはどうしたら良しでしょうか。

該当のソースコード

<footer>
    <h1><Airbnb/h1>
      <ul>
        <li><a href="#">採用情報</a></li>
        <li><a href="#">プレス</a></li>
        <li><a href="#">ポリシー</a></li>
        <li><a href="#">ヘルプ</a></li>
        <li><a href="#">ダイバーシティ&ビロンギング</a></li>
        <li><a href="#">アクセシビリティ対応新着</a></li>
        <li><a href="#">企業情報</a></li>

      </ul>
  </footer>

footer ul{
  list-style-type: none;
}


footer a{
  font-size: 14px;
  color: #767676
}

footer a:hover{
  color: #767676;
  text-decoration: underline;
}

Answer 1

liに対してline-height: 適当な値;とかでどうでしょうか。

liとaの高さを合わせるならline-height: 1;ですかね。

質問に記載されているCSSとは別のCSSが効いていると推測されるので、開発者ツールで疑わしい所をオンオフしてみるといいと思います。（右下で「Computed」が開いていますが、その横の「Style」をクリックすると適用されている全CSSが見れます）

Comments

[to-to-]

line-height: 1; を試してみました。確かにわずかに行間が狭くなりましたが、まだliとaの高さが合わない状況です。デベロッパーツールで色々いじりましたが改善されません。

[to-to-]

ただいま解決いたしました。<ul>の上の<h1>タグのところがおかしいのに気づき、修正したらできました。回答していただきありがとうございました！

[dit.]

><h1>タグのところがおかしいのに気づき
x_xさんが回答されている内容でしょうか？

[sakura_hana]

@to-to-さん
解決して何よりです。ベストアンサー選択して質問のクローズをお願いします。
（<h1>を直しただけで行間が狭まったならx_xさんの回答、<h1>を直しても行間が広いまま（line-heightの指定で直った）なら私の回答がBAかなぁと思います）

[to-to-]

<h1>を修正したら行間が狭まったため、x_xさんの回答をBAに選ばせて頂きます。
sakuraさんのおっしゃっていたline-heightプロパティの存在をすっかり忘れていたので、大変勉強になりました！
ご親切な対応ありがとうございました。

Answer 2

x <h1><Airbnb/h1>
o <h1>Airbnb</h1>

Comments

[to-to-]

返事が遅くなってしまって申し訳ございません。なぜか通知が来ておらず、上にあるsakuraさんの回答だけを見ていました。
既に解決策をご提示してくださっていたということで、BAに選ばせて頂きます。
大変失礼いたしました。

Answer 3

余白に関してcssで指定されていないので、要素に合わせてpaddingを設定すれば解決するかと思います。

下記の記事が参考になるかと思います。
ご一読下さい。
http://open.shonan.bunkyo.ac.jp/~ohtan/kouza/css-margin.html

Comments

[to-to-]

各a要素のpaddingは０なのでこれ以上余白を小さくすることができません。

[azuapricot]

<li>のstyleはどうなってますか？

[to-to-]

box-sizing: border-box;
color: rgb(33, 37, 41);
display: list-item;
font-family: -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 40px;
font-weight: 500;
height: 40px;
line-height: 40px;
list-style-type: none;
text-align: left;
text-size-adjust: 100%;
width: 1901px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

以上のようなcssが適用されています。