CSSの線高調整の問題

Question

私はウェブサイトを設計しており、すべてのページに引用符を付けています。私はこの見積もりにCSSを適用して、できるだけベストに見えるようにしています。しかし、私はいくつかの問題を抱えています。 JSFiddle上

.quote { 
 
    font-size: 18pt; 
 
    padding-top: 50px; 
 
    padding-bottom: 15px; 
 
    text-align: center; 
 
    line-height: 0.25; 
 
} 
 

 
.speech_mark_large { 
 
    color: #203D69; 
 
    font-size: 120px; 
 
    vertical-align: top; 
 
}

<div class="quote"> 
 
    <span class="speech_mark_large">&ldquo;</span> Leading the way with innovative design of corrugated Point of Sale displays and packaging offering bespoke design to fulfill your brief. 
 
    <span class="speech_mark_large">&rdquo;</span> 
 
</div>

も。

私は引用符の2つの線を近づけたいが、これを解決するために線の高さを適用すると、スピーチマークを前の行にプッシュアップする。これをどうすれば解決できますか？

Answer 1

完全要素にline-heightを設定する必要があります。次に、内側の.speech_mark_large要素に対してvertical-alignをtopに設定します。 .quote要素のline-heightを変更すると、最もよく見えると思われる行間隔を調整できます。

編集：topとposition~.speech_mark_largeを追加しました。これにより、引用符の垂直位置を変更することができます。

CSS

.quote { 
    font-size:18pt; 
    padding-top:15px; 
    padding-bottom:15px; 
    text-align: center; 
    line-height: 30px; 
} 
.speech_mark_large { 
    color:#203D69; 
    font-size:50pt; 
    vertical-align: top; 
    top: 5px; 
    position: relative; 
} 

JSFiddleを投稿この更新JSFiddle

Answer 2

はこれを試してみてください。

.speech_mark_large { 
color:#203D69; 
font-size:50pt; 
line-height: 35px; 
vertical-align:text-top; 
}​ 

行の高さは、彼らが（にターン彼らはあなたの他のテキストの上に浮く可能）インラインテキストの高さから、より少ないスペースを取るようになります。 vertical-alignは、引用符を通常よりもテキストの下部に揃えるように指示することでこれを修正します。