h3タグの文とpタグの分を揃えた場所から始めたい

Question

http://spiritualcompany.net/portrait/mosya1/index.html

のサイトの一番下の部分にある、
h3タグの「24時間365日の電話サポート」という文字の真下にpタグの「電話でオンラインツールの使い方のサポートや、 売上アップのための施策に関するお問い合わせ を受け付けます。」部分を格納したいです。

現状は、pタグがアイコンの下から始まっています。
該当コードは次の通りです。

<div class="container-fluid fifth">
        <div class="row">
          <div class="col-md-6">
            <h2>弊社が全力でサポートします。</h2>
          </div>
          <div class="col-md-6">
            <h3><i class="fas fa-phone fa-2x"></i>24時間365日の電話サポート</h3>
            <p>電話でオンラインツールの使い方のサポートや、
              売上アップのための施策に関するお問い合わせ
              を受け付けます。
            </p>

            <h3><i class="fas fa-tools  fa-2x"></i>役立つ様々なツール</h3>
            <p>弊社で提供するツールを使えば、様々な料金設定や、予約管理、
              アクセス解析などを一元管理することができます。
            </p>

            <h3><i class="fas fa-graduation-cap  fa-2x"></i>トレーニング</h3>
            <p>売上アップにつながる、LPの作成やメルマガ配信の方法など
              についてマンツーマンでトレーニングを受けることができます。
            </p>
          </div>
          
        </div>

      </div>

bootstrap5.0.0を使っています。

Answer 1

アイコンの幅と同じ左余白を設定すればいいかと。
bootstrapなら、ps-5 ms-3 でほぼ揃います。

      <p class="ps-5 ms-3">電話でオンラインツールの使い方のサポートや、
        売上アップのための施策に関するお問い合わせ
        を受け付けます。
      </p>

ただbootstrapでは細かい微調整は難しいので、cssで設定したほうがきっちり合わせられます。

.fifth p {
    padding-left: 64px;
}

Comments

[dobashi]

ご回答ありがとうございます。
bootstrapのものでもきれいに揃っています。

このps-5 ms-3の数字は、自分で試しながら数字を決めているのでしょうか。
それとも一般的なものなのでしょうか？

[hatena19]

https://getbootstrap.jp/docs/5.0/utilities/spacing/
上記によると「.25rem から 3rem までの範囲」を指定できるとあります。
リンク先の設定ではアイコン幅がたまたま、ps-5 ms-3 と合致したということです。いろいろ試行錯誤してもいいし、計算でも求められます。
アイコン幅を検証ツールで調べて、CSSで設定した方が手軽だと思います。

[dobashi]

ありがとうございます！
試行錯誤してもいいし、アイコン幅検証ツールで調べてCSSで設定するのは手軽そうですね。
ありがとうございます。

[dobashi]

何度もすみません。
アイコン幅は、検証ツールで分かったのですが、どうやってh3までの幅が20pxと知ることができるのでしょうか？それともh3は20px間隔が空いているものなのでしょうか？

[hatena19]

下記のように padding が設定されてます。これも検証ツールが確認できます。

.fifth i {
padding-right: 20px;
}

[dobashi]

失礼しました！
この20pxだったのですね。
もやもやが無くなりました。ありがとうございます。