【CSS】min-heightを使って高さを揃える方法

CSS

今回は、CSSのmin-heightを使って高さを揃える方法を紹介します。

【CSS】min-heightを使って高さを揃える方法

min-heightを指定しない場合

◎HTML

<div class="box1">
    <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="box2">
    <p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>

◎CSS

.box1 {
    border: 2px solid orange;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 25px;
}
.box2 {
    border: 2px solid orange;
    font-size: 18px;
}

box1とbox2で高さが異なっているのが分かると思います。

min-heightを指定した場合

高さを揃えるために、「min-height」を指定します。

今回はbox1の高さが100pxなので、box2に「min-height: 100px;」を指定してみます。

.box1 {
    border: 2px solid orange;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 25px;
}
.box2 {
    border: 2px solid orange;
    font-size: 18px;
    min-height: 100px;/* 最小の高さを指定する */
}

min-heightは最小の高さを指定することができるので、box1とbox2で高さを揃えることができました。

まとめ

以上が、CSSのmin-heightを使って高さを揃える方法でした。

 

関連記事:

【有益】大学生におすすめの本まとめ20選【2020年最新版】 【ブログ運営報告】大学生がブログを1ヶ月続けた結果【PV数】 ストレングスファインダーの診断で強みを見つけよう【4つのステップ】 【無料診断】強みを科学的に見つける「FFS理論」とは？