Html 在blockquote底部折叠边距/填充

这里是现场演示

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

乍一看，这是一项基本而琐碎的任务，但我面临着一个问题——在blockquote的底部折叠边距/填充（如果我理解正确的话）

我找到了一些解决方法（比如添加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>

正文{宽度：400px；}
p{页边距顶部：0；页边距底部：0.5em；}
大宗报价{
背景色：仿古白色；
顶部填充：0.5em；底部填充：0.5em；
页边距顶部：0；页边距底部：0.5em；
}
/*两个变通办法*/
/*
块引号{填充底部：1px；}
块引号{填充底部：0；边框底部：1px实心antiquewhite；}
*/
/*据我所知，由于填充/边距折叠，将无法工作*/
块引号{填充底部：0；}
块引号前的一些文本

1st blockquote

第1段。福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福

第2段。酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧

2nd blockquote

第1段。福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福

第2段。酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧

块引号后的一些文本

已更新您的

解决方法已完成

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

body{width:400px；}
p{页边距顶部：0；页边距底部：0；}
大宗报价{
背景色：仿古白色；
顶部填充：0.5em；底部填充：0.5em；
页边距顶部：0；页边距底部：0.5em；
}
/*两个变通办法*/
/*
块引号{填充底部：1px；}
块引号{填充底部：0；边框底部：1px实心antiquewhite；}
*/
/*据我所知，由于填充/边距折叠，将无法工作*/
blockquote.content:not（：最后一个子项）{
边缘底部：.5em；
}
blockquote.标题{
边缘底部：.5em；
}

1st blockquote
第1段。福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福

第2段。酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧

你说得对，

collpasing margin

s（关于折叠边距的更多信息）和

padding

s在这里起作用-最简单的方法是：

对于

块引号

，

填充顶部

，

填充底部

和

边距底部

，保留

0.5em

值：

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

删除可折叠的

块引号内的页边距-最后一个
p
的底部页边距和第一个
p
的顶部页边距

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

这意味着

blockquote

的

padding

现在将负责

blockquote

中顶部和底部的0.5em空间，而

margin bottom

将充当它们之间的分隔

正文{
宽度：400px；
}
p{
边际上限：0；
边缘底部：0.5em；
}
大宗报价{
背景色：仿古白色；
垫面：0.5em；
垫底：0.5em；
边际上限：0；
边缘底部：0.5em；
}
最后一个孩子{
页边距底部：0；
}
第一个孩子{
边际上限：0；
}

块引号前的一些文本

1st blockquote

第1段。福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福

第2段。酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧

2nd blockquote

第1段。福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福福

第2段。酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧酒吧

块引号后的一些文本

您是否尝试过删除最后一段的页边距底部并对块引号应用填充底部：.5em？您的意思是

块引号p:last child{margin bottom:0；}

？是的，这是另一个解决办法。这不是一个好主意，因为有时它会是blockquote底部的另一个元素（而不是

p

s）。