html - block 引用底部的折叠边距/填充

Question

这里是 jsfiddle现场演示。

我想让 blockquote 的顶部和底部的填充相等(精确到 0.5em)。

乍一看，这是一项基本而琐碎的任务，但我遇到了一个问题——在 blockquote 的底部折叠边距/填充(如果我理解正确的话)。

我找到了一些解决方法(比如添加 1px 边框或填充)，但它肯定很脏。

因此，问题是:是否有一种好方法可以使 blockquotes 顶部和底部的填充相等，如图所示？

<style>
    body { width: 400px; }

    p { margin-top: 0; margin-bottom: 0.5em; }

    blockquote {
        background-color: antiquewhite;
        padding-top: 0.5em; padding-bottom: 0.5em;
        margin-top: 0; margin-bottom: 0.5em;
    }

    /* Two workarounds */
    /*
    blockquote { padding-bottom: 1px; }
    blockquote { padding-bottom: 0; border-bottom: 1px solid antiquewhite; }
    */

    /* Will not work, due to padding/margin collapsing, as I understand */
    blockquote { padding-bottom: 0; }
</style>

<p>Some text before blockquotes</p>

<blockquote>
<p><strong>1st blockquote</strong></p>
<p>1st paragraph. Foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo.</p>
<p>2nd paragraph. Bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar.</p>
</blockquote>

<blockquote>
<p><strong>2nd blockquote</strong></p>
<p>1st paragraph. Foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo.</p>
<p>2nd paragraph. Bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar.</p>
</blockquote>

<p>Some text after blockquotes</p>

Answer 1

已更新您的 fiddle

解决方法已完成

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

blockquote {
    background-color: antiquewhite;
    padding-top: 0.5em; padding-bottom: 0.5em;
    margin-top: 0; 
}