メイクのスピーチは、私は私がしたいのですが（ピンクの背景で）表彰状の引用があるホーム・ページの下部に<a href="http://http:www.naomicambridge.squarespace.com" rel="nofollow noreferrer">Squarespace</a></p> <p>に取り組んでいます

Question

Squarespaceウェブサイト上のテキストの残りの部分よりも大きなマーク引用符はテキストの残りの部分よりも大きい。

引用符が<span></span>タグ内にあるかどうかを調べることから見ることができます。しかし、それはその後の最後の2行の間に下部の隙間を作成し、

span { 
    font-size: 200px; 
    position: relative; 
    top: 100px 
} 

は、その後、私は私がそれらをしたいのサイズと位置の周囲に引用符を取得することができます。

私はいくつかのカスタムCSSを追加する場合テキスト、スクリーンショットHereを参照してください：

解決方法はありますか？

Answer 1

次のように代わり<span> -sの擬似要素を使用してみてください：

figure { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 1em; 
 
    background-color: #eca29f; 
 
    color: #fff; 
 
    width: 100%; 
 
    font-family: proxima-nova; 
 
    font-weight: 300; 
 
    font-style: normal; 
 
    font-size: 22px; 
 
    letter-spacing: .015em; 
 
    line-height: 1.6em; 
 
    text-transform: none; 
 
} 
 
blockquote:before { 
 
    content: "“"; 
 
    font-size: 4em; 
 
    line-height: 0.1em; 
 
    margin-right: 0.1em; 
 
    vertical-align: -0.4em; 
 
} 
 
blockquote:after { 
 
    content: "”"; 
 
    font-size: 4em; 
 
    line-height: 0.1em; 
 
    margin-right: 0.1em; 
 
    vertical-align: -0.4em; 
 
}

<figure> 
 
<blockquote> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</blockquote> 
 
</figure>