在blockquote底部折叠边距/填充

Question

这是jsfiddle现场演示。

我想在blockquote的顶部和底部填充相等（准确地说是0.5em）。

初看，基本和琐碎的任务，但我遇到了一个问题 - 在blockquote底部折叠边距/填充（如果我理解的话）。

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

所以，问题是：是否有一种很好的方法可以使块引号顶部和底部的填充相等，如图所示？

ÿþ

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; 
}

Answer 2

body { width: 400px; }

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

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 .content:not(:last-child) {
  margin-bottom: .5em;
}
blockquote .title {
  margin-bottom: .5em;
}

<blockquote>
<p class="title"><strong>1st blockquote</strong></p>
<div class="content">
<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>
</div>
<div class="content">
<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>
</div>
</blockquote>

你可以这样做。

Answer 3

你是对的，collpasing margin s（有关折叠边距的更多信息here）和padding在这里发挥作用 - 最简单的方法是：

1. 为0.5em保留padding-top，padding-bottom和margin-bottom的{​​{1}}值：

   blockquote

2. 从blockquote { background-color: antiquewhite; padding-top: 0.5em; padding-bottom: 0.5em; margin-top: 0; margin-bottom: 0.5em; } 内部移除可折叠的边距 - 上一个blockquote的下边距和第一个p的上边距

   p

这意味着blockquote p:last-child { margin-bottom: 0; } blockquote p:first-child { margin-top: 0; } 的{​​{1}}现在将负责padding内{0.5}的顶部和底部的0.5em空间，而blockquote将作为它们。

blockquote

margin-bottom