hover時のアンダーラインを長くして、スペースも入れたい

hover時のアンダーラインを長くして、スペースも入れたいのですが、分かりません。border-bottomで試してみたところ、下線がつくまではできたのですが、調べても同様の回答が出て来ず質問します。
お願いします・

img{margin: 20px;}
body{text-align:center}
.bbb{border-radius:10px;}

.flex-menu{
    display:flex;
    justify-content: center; 
    }
.flex-menu a {
    font-size: 18px;
    margin: 30px;
    text-decoration: none;
    }
    a:hover {
        text-decoration: none;
        border-bottom: 4px solid chocolate
      }
  

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-menu">
<a href="リンク">A</a>
<a href="リンク">B</a>
<a href="リンク">C</a>
<a href="リンク">D</a>
</div>

</body>
</html>

m.ts10806

2020/09/11 21:55

＞調べても「投入したキーワード」「参考にした記事」「試してみたこと」を具体的に記載してください。あとコードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

B_J

2020/09/12 00:21 編集

ありがとうございます。

m.ts10806

2020/09/12 00:15

質問は編集できますので、いつくるか分からない「以後」ではなく、今やりましょう。

行動規範の内容に同意します

回答1件

ベストアンサー

padding で調整すればいいでしょう。

左右パディングを大きくすればアンダーラインは広がります。
下パディングを大きくすればテキストとアンダーラインのスペースが広がります。

下記は適当に設定したものですので、これを元にお好みで調整してください。

css
1.flex-menu a {
2  font-size: 18px;
3  margin: 10px;
4  padding: 10px 20px;
5  text-decoration: none;
6}

投稿2020/09/11 22:55

hatena19

総合スコア34075

B_J

2020/09/12 00:14

ご回答ありがとうございます！ .flex-menu a { font-size: 18px; margin: 30px; padding: 0px 20px 10px 20px; text-decoration: none; } とやりましたが、なかなか良い感じにはなりました。ただし、４つの項目自体のスペースも開いてしまいました。４つの項目のスペースは変えずに、４つの項目のhover時の下線だけを長くする方法はないでしょうか？何度もすみませんが、どうかよろしくお願い致します。

hatena19

2020/09/12 00:45

まずは margin と padding の機能の違いを理解しましょう。それが理解できれば思い通りに調整できます。 margin は要素の外側の余白、padding は要素の内側の余白です。項目(要素)間のスペースは margin で調整できます。 .flex-menu a { font-size: 18px; margin: 30px 0; padding: 0px 20px 10px 20px; text-decoration: none; }

B_J

2020/09/12 05:35

hatena19さま、本当に迅速丁寧にありがとうございます。実際に試してみて、結構理想形に近づきました。Ａ　Ｂ　Ｃ　Ｄとあるとして、marginとは各ＡＢＣＤ間のスペース、paddingは今回で言うならば各ＡＢＣＤとhover時の下線とのスペースという理解でよろしいのでしょうか？

hatena19

2020/09/12 05:43

今回の場合は、結果的にそうなってます。正確には要素の境界線（border）の外側の余白がmargin、境界線の内側の余白が padding となりますが、言葉では伝わりにくいので、下記のリンク先の画像付きの説明を読まれると理解しやすいと思います。 CSSのmarginとは？paddingとは？余白の指定方法まとめ https://saruwakakun.com/html-css/basic/margin-padding

B_J

2020/09/12 08:19

良く分かりました。ご親切に誠にありがとうございました。

行動規範の内容に同意します