line-heightによってできた上下の余白を詰めるやり方が分かりません、
今現在ホームページを作成していますが、実際のページで見てみると、見本と大きなずれがあります。
これを何とかするべく、line-heightの余白を詰めたいと考えています、今現在取り組んでる余白の詰め方
上記のURLのやり方でやろうとしていますが、がcalc()がよく分かりません。
どこが間違ってますでしょうか?
CSS
1.Fv .Fv-img div .Fv-title-wrapper-second{ 2 height: 102px; 3 padding-bottom: 28px; 4 padding-top: 44px; 5} 6 7.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper { 8 font-size: 18px; 9 color: #fff; 10 line-height: 51px; 11 --line-height-width: calc(2.55); line-height: var(--line-height-width); 12} 13 14.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::before { 15 display: block; width: 0; height: 0; content: ''; 16 margin-top: calc((1 - var(--line-height-width)) * 0.5em); 17} 18 19.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::after { 20 display: block; width: 0; height: 0; content: ''; 21 margin-bottom: calc((1 - var(--line-height-width)) * 0.5em); 22}
HTML
1<section class="Fv-section"> 2 <div class="Fv"> 3 <div class="Fv-img"> 4 <div class="Fv-img-container"> 5 <div class="Fv-title-wrapper"> 6 <h2 class="Fv-title">TOEFL対策はEngress</h2> 7 </div> 8 <div class="Fv-title-wrapper-second"> 9 <p class="Fv-txt-wrapper">日本へのTOEFL指導歴豊かな講師陣の<br> 10 コーチング型TOEFLスクール 11 </p> 12 </div> 13 <div class="Fv-outer"> 14 <a href="#" style="text-decoration: none;"> 15 <div class="Fv-outer-btn"><p>資料請求</p></div> 16 </a> 17 </div> 18 <div class="contact-link-second"> 19 <a class="contact-link" href="#"> 20 <p class="contact-link-second">お問い合わせ</p> 21 </a> 22 </div> 23 </div> 24 </div> 25 </div> 26</section>
・完成図が確認できない
・取り組んでいるというリンク先に記載されている:before:afterも使っていない
・質問文に出てくるcalc()も登場しない
何をどう判断すればいいのでしょう?
1,この質問は、ウェブサイトにあるの記事のやり方を質問しているもので、見本は必要ありません、
2. .Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::before {
.Fv .Fv-img div .Fv-title-wrapper-second .Fv-txt-wrapper::after {
使い方があっているのかは、分かりませんが、使っています。使い方が違っているのでしょうか?
3.リンク先の質問の部分にcalc()が使われていますご確認ください。
> この質問は、ウェブサイトにあるの記事のやり方を質問しているもので、見本は必要ありません
どうなって欲しいのかは、かなりわかりにくかったですよ。
「必要ない」と切り捨てるのも一つの考え方ですが、回答をしようとする人に意図が伝わっていない(伝わりにくい)という事実は事実としてあるので、改善をされればより回答が得られやすいのではないでしょうか。
あくまで、いち意見ですので、そうしなくてはいけない、ということを申し上げているわけではないです。
回答2件
あなたの回答
tips
プレビュー