Bootstrap5のボーダーラインについて

前提・実現したいこと

・アイコン、およびテキストとボーダーラインの間の余白を埋めたい(画像の赤線部分)
・アイコンとテキストを綺麗に並べたい(画像の青線部分)

発生している問題・エラーメッセージ

試行錯誤を繰り返していたのですが、上記を上手く実現できません。

該当のソースコード

使用言語 : HTML/CSS (Bootstrap5) , PHP*
*現在PHPで実装している部分はヘッダー、フッダーの共通部分のパーツ化のみなので、本件には関連していないと認識しております。

■出力されたhtmlのソースコード


<!doctype html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- bootstrap  -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

    <!-- font -->
    <link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">

    <title>Portfolio Site</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-secondary text-white-50 fw-bold">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Portfolio Site</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav navbar-right">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Skill</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
    </header>
  <section class="toc">
  <div class="iconpos border-bottom border-dark border-2">
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />
  </svg>
  <h1 class="">Profile</h1>
  </div>
  </section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

*svgタグについてはBootstrap5の下記ページにて引用しております。
https://icons.getbootstrap.jp/icons/person-fill/

■styles.css

header {
    font-family : 'Teko', sans-serif; 
    font-size : 24px;
}

.navbar-brand {
    font-size : 32px;
}

.toc{
    height : 5em;
    display : flex;
    align-items : flex-end;
    justify-content : center;
}

.iconpos {
    display : flex;
    padding-top : 15px;
}

h1 {
    font-family : 'Teko', sans-serif;
}

試したこと

クラスの"toc"や"iconpos"のcss内の数値を弄ったり、"index.php"のdivタグの位置を変えたりしてみましたが、思うようにできませんでした。

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

特になし

m.ts10806

2021/09/08 23:34

「関係ない」のでしたらphpそのままではなくブラウザに出力されたhtmlを提示してください

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

回答1件

ベストアンサー

__アイコンとテキストを綺麗に並べたい(画像の青線部分) __

SVG自身の中にすでに余白がありますので、ベースラインの揃えてもずれてしまうので、まずそこを何とかしないといけないと思います。

html
1<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 12"> 
2<!-- 多分これでいいと思いますが、ずれているようであればviewboxの値を調整してください。-->

css
1.iconpos {
2	display: flex;
3	padding-top: 15px;
4	align-items: baseline; /* 追加 */
5}

アイコン、およびテキストとボーダーラインの間の余白を埋めたい(画像の赤線部分)

とりあえず、マージンを消してみては？
それでも足りなければ、行高さやネガティブマージンで調節するなどが必要になると思います。

css
1h1 {
2	line-height: 1;
3	margin: 0;
4}

投稿2021/09/09 02:05

編集2021/09/09 02:10

Lhankor_Mhy

総合スコア36163

youOvO

2021/09/09 02:23

■「アイコン、およびテキストとボーダーラインの間の余白を埋めたい」について一応HTML/CSSの基礎に関しては一通り勉強していたはずなのですが、"baseline"の知識が欠如しておりました。自身の環境にて確認したら問題の部分は解決いたしました。 ■アイコンとテキストを綺麗に並べたいこちらに関しては、"margin"を調整すれば良いのではないかとは思っていたのですが、"h1"ではなく、"toc"や"iconpos"で色々試行錯誤してしまっていたのが原因だったようで、こちらも解決いたしました。また、"line-height"も知識から抜けていたのであらためて復習しながら簡単なサイトを作ろうと思います。初学者の拙い質問に対して的確なご回答をしていただき、ありがとうございました。