塊引用與文本相同的高度

-3

如何使塊引用行與元素內部的文本具有完全相同的高度。塊引用與文本相同的高度

這裏是它應該是什麼樣子的例子：

這是我從我所創建的代碼獲取當前的結果：

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

<blockquote>Test</blockquote>

從結果中，我們可以看到該行垂直比文本更大。

來源

2017-08-31 Jordan Kellett

這將是高度依賴於所使用的字體基於原始代碼段（下面找到）。爲了可讀性，字符**應該**在上面和下面有空格。 –

注：直列Flex不支持舊的瀏覽器：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>

- 此答案由عارف بن الأزرق

來源

2017-08-31 13:33:41 jcdenooy

這是不好的，拿一個人的代碼，然後作出新的答案 –

我的歉意，它確實是基於你的代碼。我將編輯我的答案以表明這一點，並且不會忘記將來參考。由於意見是爲了澄清/指出問題_我覺得這是不夠的，因爲問題會從一個新的代碼片段中受益更多。 – jcdenooy

是的，你是對的，謝謝 –

-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>

來源

2017-08-31 11:05:00

這些似乎仍然有點出？這是由於標籤的高度，但我不知道如何使標籤的高度與文本完全相同。 –

你可以使用的line-height。事情是這樣的：

<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>

來源

2017-08-31 11:13:00 Ptrckk

塊引用與文本相同的高度

回答

相關問題