如何使用 CSS 增加块引用不同部分之间的间距？答案

【问题标题】：How do I increase the spacing between different parts of blockquotes with CSS?如何使用 CSS 增加块引用不同部分之间的间距？
【发布时间】：2015-03-01 21:40:58
【问题描述】：

我有一堆要显示的嵌套引号，但我发现（请参阅下面的附件示例）引号之间的间距太小。如何增加这个？

HTML：

<blockquote>stuff
  <blockquote>neato</blockquote>
</blockquote>

CSS：

blockquote {
    border-left: 1.5px solid #ccc;
    color: #888;
    margin: 0 0 10px 0;
    padding: 0 0 0 12px;
}

这是一个交互式示例：http://codepen.io/anon/pen/bNKZVo?editors=110

在该示例中，我发现“整洁”下的间距和下一个引号太紧，我想要更多空间。我尝试了line-height，但是虽然它们之间的间距最终变得更好，（大约 50 行高）它使第二个引用荒谬的高度。

【问题讨论】：

padding: 12px 0 0 12px; 或许？

标签： html css blockquote

【解决方案1】：

如果您想在嵌套的 bloquote 中添加边距顶部，请执行此操作，在 CSS 中您可以将其表示为：

blockquote blockquote {margin-top:10px}

这样，顶级bloquote没有边距，但所有嵌套的都得到它。

【讨论】：

OP 可能需要填充。示例中有一个左边框。

【解决方案2】：

新的 CSS 块怎么样：

blockquote > blockquote {
    margin-top: 20px;
}

这只会影响嵌套的引号，而不是顶级的。

【讨论】：

注意：这只会影响直接孩子