如何使块引用行与元素内部的文本完全相同。
这是一个应该是什么样子的例子:
这是我从我创建的代码中获得的当前结果:
blockquote {
margin: 20px 0 30px;
padding-left: 20px;
border-left: 5px solid #1371b8;
}

<blockquote>Test</blockquote>
&#13;
从结果中,我们可以看到该行垂直大于文本。
答案 0 :(得分:3)
注意: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;
}
&#13;
<blockquote ><span>windows to the universe</span></blockquote>
&#13;
- 此答案基于عارف بن الأزرق
的原始代码段(位于下方)答案 1 :(得分: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>
答案 2 :(得分:0)
这是blockquote行高问题的解决方案。 只需在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>
答案 3 :(得分:-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>