折叠块引用底部的边距/填充答案

【问题标题】：Collapsing margins/paddings at the bottom of blockquote折叠块引用底部的边距/填充
【发布时间】：2017-09-07 10:32:54
【问题描述】：

这里是jsfiddle 现场演示。

我想让块引用的顶部和底部的填充相等（准确地说是 0.5em）。

乍一看，这是基本而琐碎的任务，但我遇到了一个问题 - 在块引用底部折叠边距/填充（如果我理解正确的话）。

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

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

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

【问题讨论】：

您是否尝试过删除最后一段的 margin-bottom 并将 padding-bottom:.5em 应用于块引用？
您的意思是blockquote p:last-child { margin-bottom: 0; }？是的，这是另一种解决方法。这不是一个好主意，因为有时它会是块引用底部的另一个元素（不是ps）。

标签： html css

【解决方案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; 
}

【讨论】：

【解决方案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>

你可以这样做。

【讨论】：

【解决方案3】：

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

为padding-top、padding-bottom 和margin-bottom 为blockquote 保留0.5em 值：

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

这意味着blockquote 的padding 现在将负责blockquote 顶部和底部的0.5em 空间，margin-bottom 将充当它们之间的分隔符。

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;
}
blockquote p:last-child {
  margin-bottom: 0;
}
blockquote p:first-child {
  margin-top: 0;
}

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

【讨论】：