ハンバーガーアイコン 作成 ①spanタグのそれぞれ指定の高さをあけたい ②高さを横のタイトルと平行にならべるには

Question

前提・実現したいこと

現状としては
どこをいじったらカスタマイズできるかあまり理解ができていない
なんとなくそうかなと思うところは以下の箇所です。

   .burger-btn,
   span {
    display: inline-block;
   }

   .burger-btn {
/*burger-btn全体の高さや幅*/
    width: 30px;
    height: 20px;
    background: none;

    display: block;

    span {
     background-color: $white;
     width: 30px;
/*このheightはspanで引いた各線の高さ　つまり、線の太さが3px*/
     height: 3px;
     position: absolute;
    }
   }

   .burger-btn span:nth-child(1) {
    margin-bottom: 8px;
/*spanの一番目の下に*/
   }

   .burger-btn span:nth-child(2) {
    margin-bottom: 8px;
/*spanの二番目の下に*/
   }
  }

調整したい箇所は
<span>タグをそれぞれ10px間隔で高さをあける
.burger-btnが1本目の<span>の高さが真ん中になっているため、アイコンそのものが左隣にあるタイトルと平行になるように並べたい

該当のソースコード

 <button class="burger-btn">
    <span></span>
    <span></span>
    <span></span>
   </button>

該当のソースコード

   .burger-btn,
   span {
    display: inline-block;
   }

   .burger-btn {
    width: 30px;
    height: 20px;
    background: none;

    display: block;

    span {
     background-color: $white;
     width: 30px;
     height: 3px;
     position: absolute;
    }
   }

   .burger-btn span:nth-child(1) {
    margin-bottom: 8px;
   }

   .burger-btn span:nth-child(2) {
    margin-bottom: 8px;
   }
  }

試したこと

①クリスタ解説のやり方を試す
→解説のやり方を試したところ、なぜかうまくいかなかったところあきらめて別の作り方を探しました

②以下サイトの作成方法を試す
https://www.nxworld.net/10-css-hamburger-menu-icon-design-and-effect.html

→アイコン自体は表示され、大きさなどを使いたい大きさにカスタマイズしていこうと思ったが、どこがどう動くのかよくわかていないこともありいじり方がわからない
heightをさわってみたが、線の太さなどが変化するだけで線の高さを設定する場所が見つけられない

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:Brackets
ブラウザ:クローム

現状

Answer 1

解決したみたいですが、ご参考まで。
spanタグはインライン要素であり、本来は高さや幅を指定するべきものではありません。（そうはいっても、現実的には指定したら結構効いてくれるようですが）
ただ、display:blockによりブロック要素として扱うことができるようになり、高さや幅指定の意味がでてきます。
参考：【display】インラインブロック要素の性質と使い方

Comments

[mitrasi]

ご回答ありがとうございます！
さようでございますね！基本中の基本ですが、つい抜けておりました。。
復習いたします。

Answer 2

こんにちは。
表題の件につきまして、解決致しましたのでご報告致します。

 .burger-btn,
   span {
    /* display: block;*/
/*このブロックの存在意義は不明　なくても異常はなかった*/
   
   }

   .burger-btn {

    background: none;

    span {
     background-color: $white;
     width: 30px;
     height: 3px;

    }
   }

   .burger-btn span:nth-child(1) {
    margin-bottom: 8px;
   }

   .burger-btn span:nth-child(2) {
    margin-bottom: 8px;
   }

コード中にもありますが、「display:block」の存在意義についてはわかりませんでした。
ただ、クリスタ解説でも参考サイト様でも入っていたので必要なのだろうなとは思うのですが、この件に関してなにかご存じの方がいらっしゃればご回答お待ちしております。
ひとまず、動作的にはできたので、一旦解決済みとさせていただきますが、上記の不明点に関するご回答頂けた場合はこちらのベストアンサーを取り下げます。

ご協力ありがとうございました。