文字上の妙なマージンを消したいです。

文字上に妙なマージンが入ってしまっています。
画像のように縦の高さを揃えてからpadddingを使いたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <link rel="stylesheet" href="style.css">
9      <!--Bootstrap CSS-->
10      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
11      <!--CSS-->
12      <link rel="stylesheet" href="style.css">
13      <!--Fontawesome-->
14      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
15    <title>Document</title>
16</head>
17<body>
18   <!--メガドロップダウンメニュー-->
19   <div class="menu" id="menu">
20    <!-- メニューボタンここにマウスを乗せると下のコンテンツが表示される -->
21    <div class="container">
22        <div class="row">
23            <div class="col-sm-4">
24                <li class="menu_list">
25                 <a class="text-white" href="#" style="font-size: 20px;">来院・入院の方</a>
26                 <!-- メガメニュー 一旦非表示にし、マウスを乗せたボタンに連動したコンテンツのみ表示 -->
27                 <div class="menu_contents">
28                    <ul>
29                      <li><a href="#">メニュー01コンテンツ</a></li>
30                    </ul>
31                 </div>
32                </li>
33            </div>
34            <div class="col-sm-4">
35               <li class="menu_list">
36                 <a class="text-white" href="#" style="font-size: 20px;">慶應義塾大学病院について</a>
37                  <div class="menu_contents">
38                   <ul>
39                     <li><a href="#">メニュー02コンテンツ</a></li>
40                    </ul>
41                   </div>
42               </li>
43            </div>
44            <div class="col-sm-4">
45                <li class="menu_list">
46                    <a class="text-white" href="#" style="font-size: 20px;">医療関係の方</a>
47                    <div class="menu_contents">
48                    <ul>
49                        <li><a href="#">メニュー03コンテンツ</a></li>
50                    </ul>
51                    </div>
52                </li>
53            </div>
54        </div>
55    </div>
56</div>
57<!--メガドロップダウンメニュー-->
58
59    <!--CDNでjQuery読み込む-->
60    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
61    <script type="text/javascript" src="script.js"></script>
62</body>
63</html>

css
1
2/* ①メニューボタンのスタイル */
3.menu {
4  position: relative;
5  background-color: #005;
6}
7.menu .menu_list > a {
8  display: block;
9  text-align: center;
10  transition: .3s;
11  text-decoration: none;
12}
13.menu .menu_list > a:hover {
14  color: #fff;
15  background: red;
16}
17/* ②メガメニューのスタイル */
18.menu_contents {
19  display: none;
20  position: absolute;
21  top: 100%;
22  left: 0;
23  width: 100%;
24}

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

回答2件

CSS
1.menu_list {
2  list-style-type: none;
3  padding: 10px;
4}

paddingはお好みでどうぞ。

投稿2021/05/06 10:29

itagagaki

総合スコア8402

Larkiwing

2021/05/06 10:38

ありがとうございます。

Larkiwing

2021/05/06 10:46

＞itagagakiさんちなみになんですが、https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type#none では、list-style-typeプロパティーを設定すると「マーカーは表示されません。」とのことなのですが、このプロパティーでなぜmarginが消えるのでしょうか？

itagagaki

2021/05/06 11:38

bootstrap.min.css というのが適用されているため気付きにくくなっています。 <div class="menu" id="menu"> のところを一時的に <div class="menu" id="menu" style="background: gray;"> にしてみてください。リストのマーカーが表示されていて、要らない余白の原因になっていることがわかると思います。

Larkiwing

2021/05/06 12:14

［電柱］∀￣）チラッ（★＿★）キラ～～～～ンあーーーーー！！見えました！なるほど。確かにマーカーが入ってますね。ありがとうございます。

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