line-heightによってできた上下の余白を詰めるやり方が分かりません、
今現在ホームページを作成していますが、実際のページで見てみると、見本と大きなずれがあります。
これを何とかするべく、line-heightの余白を詰めたいと考えています。
今現在取り組んでる余白の詰め方
line-height で生まれる要素の上下の隙間をなくす方法
上記URLのやり方でやろうとしていますが、calc()
がよく分かりません。
どこが間違ってますでしょうか?
.Fv .Fv-img div .Fv-title-wrapper-second{
height: 102px;
padding-bottom: 28px;
padding-top: 44px;
}
.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper {
font-size: 18px;
color: #fff;
line-height: 51px;
--line-height-width: calc(2.55); line-height: var(--line-height-width);
}
.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::before {
display: block; width: 0; height: 0; content: '';
margin-top: calc((1 - var(--line-height-width)) * 0.5em);
}
.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::after {
display: block; width: 0; height: 0; content: '';
margin-bottom: calc((1 - var(--line-height-width)) * 0.5em);
}
<section class="Fv-section">
<div class="Fv">
<div class="Fv-img">
<div class="Fv-img-container">
<div class="Fv-title-wrapper">
<h2 class="Fv-title">TOEFL対策はEngress</h2>
</div>
<div class="Fv-title-wrapper-second">
<p class="Fv-txt-wrapper">日本へのTOEFL指導歴豊かな講師陣の<br>
コーチング型TOEFLスクール
</p>
</div>
<div class="Fv-outer">
<a href="#" style="text-decoration: none;">
<div class="Fv-outer-btn"><p>資料請求</p></div>
</a>
</div>
<div class="contact-link-second">
<a class="contact-link" href="#">
<p class="contact-link-second">お問い合わせ</p>
</a>
</div>
</div>
</div>
</div>
</section>
.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper {border: 1px solid #000;}
を追加してみればわかるかもしれないですが十分詰めれているようにも見えます。むしろはみ出しているぐらいです。これ以上詰めたいということですか?