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

Question

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

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

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

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

<blockquote>Test</blockquote>

从结果中，我们可以看到该行在垂直方向上比文本大。

Answer 1

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

\n\n

\n
• 在块引用内添加了一个跨度以对其进行最佳定位；请记住，当您更改字体或字体大小时，您必须重做此操作！
\n

\n\n

\r\n

\r\n

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

\r\n

  <blockquote ><span>windows to the universe</span></blockquote>

\r\n

\r\n

\r\n

\n\n

\xe2\x80\x93 这个答案基于\xd8\xb9\xd8\xa7\xd8\xb1\xd9\x81 \xd8\xa8\xd9\x86 \xd8\xa7\xd9 的原始代码片段（见下文） \x84\xd8\xa3\xd8\xb2\xd8\xb1\xd9\x82

\n