块引用左边框与文本高度相同答案

【问题标题】：Block quote left border same height as text块引用左边框与文本高度相同
【发布时间】：2017-08-31 10:26:00
【问题描述】：

如何使块引用行的高度与元素内的文本完全相同。

这是它应该是什么样子的示例：

这是我从我创建的代码中得到的当前结果：

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

&lt;blockquote&gt;Test&lt;/blockquote&gt;

从结果中我们可以看出，这条线在垂直方向上比文字大。

【问题讨论】：

这在很大程度上取决于所使用的字体。为了便于阅读，字符应该在其上方和下方留有空格。

标签： css blockquote

【解决方案1】：

注意：inline-flex 不支持旧版浏览器：http://caniuse.com/#feat=flexbox
但它确实有效...

在块引用内添加了一个跨度以优化定位；请记住，当您更改字体或字体大小时，您必须重新执行此操作！

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

  &lt;blockquote &gt;&lt;span&gt;windows to the universe&lt;/span&gt;&lt;/blockquote&gt;

– 此答案基于عارف بن الأزرق 的原始代码 sn-p（见下文）

【讨论】：

拿别人的代码然后做出新的答案是不好的
抱歉，确实是基于您的代码。我将编辑我的答案以显示这一点，并且不会忘记将来参考。由于 cmets 旨在澄清/指出问题，我觉得这还不够，因为问题会从新代码 sn-p 中受益更多。

【解决方案2】：

您可以使用行高。像这样的：

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

【讨论】：

【解决方案3】：

这里是块引用行高问题的解决方案。只需制作 blockquote:before 并向左添加边框并使用绝对位置进行调整。你已经完成了。 :)

blockquote{    
    font-size: 35px;
    line-height: 52px;
    margin: 28px 0;
    overflow: hidden;
    padding: 0 0 0 26px;    
    font-weight: 100;
    color: #CC6B39;    
    position: relative;
}
blockquote:before {
    content: "";
    border-left: 6px solid #39348F;
    position: absolute;
    bottom: 14px;
    top: 13px;
    left: 0;
}

<blockquote>“Lorem Ipsum is simply dummy text of the 
printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500,”</blockquote>

【讨论】：

【解决方案4】：

试试看

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

  &lt;blockquote &gt;windows to the universe&lt;/blockquote&gt;

【讨论】：

这些似乎还是有点过时了？这是由于标签的高度，但我不知道如何使标签与文本的高度完全相同。