2017-08-31 11 views
-3

ブロック引用符を要素内にあるテキストとまったく同じ高さにするにはどうしたらいいですか?ここでブロック引用符はテキストと同じ高さになります

は、それがどのように見えるかの例です:

enter image description here

これは私が私が作成したコードから取得しています現在の結果である:

blockquote { 
 
    margin: 20px 0 30px; 
 
    padding-left: 20px; 
 
    border-left: 5px solid #1371b8; 
 
}
<blockquote>Test</blockquote>

結果行がテキストよりも垂直に大きいことが分かります。

+0

によって(下記の通り)元のコードスニペットに基づいています。文字は読みやすくするために上下にスペースがあることが想定されています**。 –

答えて

3

注:インラインフレックスがサポートされていない古いブラウザ:http://caniuse.com/#feat=flexbox
しかし、それは仕事をし... BLOCKQUOTE内のスパンが最適にそれを配置する

  • を追加しました。フォントやフォントサイズを変更したときにこれをやり直さなければならないことを覚えておいてください!

blockquote { 
 
    font-size: 50px; 
 
    text-transform:uppercase; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 50px; 
 
    padding-left: 15px; 
 
    border-left: 5px solid #66e4b4; 
 
    display:inline-flex; 
 
} 
 

 
blockquote span { 
 
    margin-top:-10px; 
 
    margin-bottom:-10px; 
 
}
<blockquote ><span>windows to the universe</span></blockquote>

- この回答は、これが使用されているフォントに高度に依存するであろうعارف بن الأزرق

+0

誰かのコードを取ってから新しい回答を –

+0

するのは悪いです。本当にあなたのコードに基づいています。これを示すために私の答えを編集し、将来参照するのを忘れることはありません。 コメントは、_clarification /が問題を指摘するためのものであるため、新しいコードスニペットの方が多くのメリットがあるため、十分ではないと感じました。 – jcdenooy

+0

はい、あなたはそれについて正しいです、ありがとう –

-1

は、あなたが行の高さを使用することができます

blockquote { 
 
    font-size: 50px; 
 
    text-transform:uppercase; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    margin-left: 50px; 
 
    padding-left: 15px; 
 
    border-left: 5px solid #66e4b4; 
 
}
<blockquote >windows to the universe</blockquote>

+0

これらはまだ少し出ているようですか?これはタグの高さに起因するものですが、タグをテキストと同じ高さにする方法はわかりません。 –

0

ことを試してみてください。このような何か:

<style> 
.header blockquote { 
margin: 20px 0 30px; 
padding-left: 20px; 
border-left: 5px solid #1371b8; 
line-height: 25px; 
} 
</style> 

<div class="header"> 
<blockquote><h1>WINDOWS TO <br /> 
THE UNIVERSE</h1></blockquote> 
</div> 
関連する問題