引用块凸出

在 HTML 中，从其他地方引用的文本块标记如下

<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>

在您的 CSS 中，您可能对它们有特殊的样式。 也许一点点 background 和 padding

blockquote { padding: 10px; background: #eee; }

如果引用包含多个段落，则可能在引用块中嵌套段落（两者都是块级元素，因此可以）。 引号也可能位于较大的文本区域内，因此我们假设它周围有段落

<p>Preceding paragraph</p>

<blockquote>
   <p>Hey, I'm a block of text from elsewhere.</p>
   <p>And I'm another one.</p>
</blockquote>

<p>Succeeding paragraph</p>

当然，我们需要在这些块之后留出一些间距，这样段落才有呼吸空间，看起来像段落

blockquote, p { margin-bottom: 20px; }

现在我们遇到了一个经典问题。 引用块内部最后一个段落的 margin 将向下推引用块的大小，使引用周围的空间不均匀。

可以通过从引用块内的最后一个段落中删除底部填充来解决此问题。

blockquote p:last-child { margin-bottom: 0; }

请注意，:last-child 在几乎所有内容中都受支持，除了 IE 8 及更低版本。 如果这是一个大问题，尝试此方法。

或者，为了获得更好的浏览器支持，而无需使用 JavaScript，您可以通过使用以下方法获得 IE7/IE8 支持

blockquote, p { margin-top: 20px; }
blockquote p:first-child { margin-top: 0; }

… 因为这两个浏览器支持 :first-child 但不支持 :last-child。

合并边距

请注意，以上情况只有在您对引用块使用 padding 或 border 时才会生效。 如果您只使用边距，则永远不会出现此问题。 包含 20px 底部边距的段落，位于具有 20px 底部边距的引用块中，仍然只会将其南部邻居向外推 20px。 这不是错误，而是正常的边距合并。 如果你想了解更多 Andy Budd 有七年前的一篇文章，其中包含您想了解的有关边距合并的所有内容。