サイズが大きい文字が混じっているとき高さを均等にする方法

こんにちは。今日は「サイズが大きい文字の高さを小さくする方法」について書きます。

文章ではイメージがつかないと思うので、ブラウザ上の画像を載せます↓

<strong>で何箇所か強調しているのですが、行間が均一ではないことがわかります。

そして簡単にいうと、この行間を均一にする方法が今日書きたい内容です！

ではさっそく見ていきましょう〜＾＾

コード

HTML編

            <div class="txt">
              <p>テキストが入ります。<strong>強調文字</strong>テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。<strong>強調文字</strong>テキストが入ります。<br>
              テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>

CSS編

 .txt strong {
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
}

結果↓

指定したあと、行間が均一になったことがわかります＾＾

<strong>の【line-height】を1にすることで影響されないようにしています。

あと、【vertical-align】の指定も重要でこれがないと均一になりません。

では今日はここまで〜〜