テキストアニメーションの文字の上下に空白ができてしまう。

実現したいこと
テキストアニメーションのコードを書いているのですが、付属画像１のようにテキストの上下に隙間ができてしまいます。この隙間を狭く調節したいのですが、できずに困っています。
アニメーションはきちんと作動しています。

付属画像１　赤い矢印が隙間です。

試したこと
クロームのデベロッパーツールで確認してみたのですが、隙間が確かにあるようですが、
marginなどを設定しているわけでもないし、cssのコードにある、 vertical-align: -20px;も関係ないと思います。

原因はなんでしょうか？　回答よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4
5<head>
6    <meta name="robots" content="noindex,nofollow">
7    <meta content="text/html; charset=utf-8" />
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <title></title>
10    <link rel="stylesheet" href="bbb.css">
11   
12    
13   <script src="jquery-3.6.0.min.js"></script>
14   
15
16   <script>
17    $(function() {
18        const hum = $('#hamburger, .close')
19        const nav = $('.sp-nav')
20        hum.on('click', function(){
21            nav.toggleClass('toggle');
22        });
23    });
24  </script>
25
26  <style type="text/css">
27
28 </style>
29
30
31</head>
32
33<body>
34 <!--wrapperレスポンシブ対応で右に出る謎の余白を無くすbody全体に適応-->
35    <div class="wrapper">
36
37
38        <section id="about">
39            <div class="slide-bottom show">テキスト太字<span></span></div>
40            <div class="slide-bottom show">テキスト太字テキスト太字テキスト太字テキスト太字<span></span></div>
41            <p class="slide-bottom show"> テキストテキストテキストテキスト<br>テキストテキストテキストテキストテキスト
42                <br>テキストテキストテキストテキストテキストテキスト<br>
43               </p>
44        </section>
45
46        <section>
47        <p class="slide-right show">transition-delayで時差表示</p>
48    </section>
49
50
51        <script>
52            //フェードイン用のコードです
53            $(function(){
54                $(window).on('load scroll', function() {
55                    $(".show").each(function() {
56                        var winScroll = $(window).scrollTop();
57                        var winHeight = $(window).height();
58                        var scrollPos = winScroll + (winHeight * 0.9);
59                        if($(this).offset().top < scrollPos) {
60                            $(this).css({opacity: 1, transform: 'translate(0, 0)'});
61                        }
62                    });
63                });
64            });
65            //フェードイン用のコードはここまでです
66        </script>
67
68</div>
69</body>
70
71</html>
72

css
1/* 画像中央配置 */  
2.center{
3    text-align: center;
4  }
5  
6 
7 
8 /* section */
9.flex {
10	display: flex;
11}
12section {
13	overflow: hidden;
14	text-align: center;
15	padding: 50px 0;
16}
17section div {
18  color:#0212f8;
19  font-size: 39px;
20  font-weight: 600;
21  vertical-align: -40px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
22  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
23  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
24  text-align: center;/* ブロック要素のみしか本来適応できない */
25}
26section p {
27  color:#a09f9f;
28  font-size: 27px;
29  font-weight: 400;
30  vertical-align: -20px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */
31  display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/
32  width: 100%;/* インライン要素にtext-align: center;を適応させるため１００％必須 */
33  text-align: center;/* ブロック要素のみしか本来適応できない */
34
35}
36
37
38
39/* sectionここまで */
40
41
42/* フェードイン用のCSS */
43/* 下からフェードイン */
44.slide-bottom {
45	opacity: 0;
46	transform: translate(0, 20px);
47	transition: all 1s ease-out;
48 }
49/* 右からフェードイン */
50.slide-right {
51	opacity: 0;
52	transform: translate(20px, 0);
53	transition: all 1s ease-out;
54 }
55
56/* フェードイン用のCSSここまで */