行間と、縦並び横並びを意図するままにしたい。

Question

コード
<p>住所:〇〇都〇〇区〇〇　〇-〇-〇</p>
            <p><span class="fas fa-envelope-square"></span>info@.......</p>
            <p><span class="fas fa-phone-alt"></span>〇〇-〇〇〇〇-〇〇〇〇</p>
            <p><span class="fas fa-fax"></span>〇〇-〇〇〇〇-〇〇〇〇</p>

```ｃｓｓ
コード
.info p {
  margin: 0px;
  height: 24px;
  display: inline-block;

コード
info p {
  margin: 0px;
  height: 24px;
  ~~display: block;~~

以上の、コードですが、上のCSSだと行間は整うが、横並びになってしまい、
下のｃｓｓだと縦並びだが、行間が整わないです。

これが、inline-blockの場合。行間はいいが、横並び。

blockの場合。縦並びだが、住所とメールの幅だけが広くなる。電話との行間と違う。

line-heightで指定しても変わりません。

Comments

[yoshinavi]

初めての質問では無いと思いますので、ヘルプ等を参考にして、各コードは「コードブロック」として提示してください。

HTMLのクラス名称と、CSSのセレクタ名称に共通の部分がありません。見直してみてください。

[RT2]

ごめんなさい。
内容も解決できました。

Answer 1

ブロック要素とインライン要素を理解すれば行間の不具合も勝手に解消されるのかな。。。