ブロッククォートの末尾にある余白/パディングの末尾に

Question

ここにjsfiddleライブデモがあります。

ブロッククォートの一番上と一番下にあるパディングを、等しくなるように（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> 

Answer 1

は、あなたがこのようにそれを行うことができます

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>

を行って、あなたのfiddle

回避策を更新しました。

Answer 3

あなたは正しい、collpasing margin秒ここで遊んでいるとpadding S（崩壊マージンhereについての詳細情報）です - 一番簡単な方法は次のとおりです。

1. はpadding-top、padding-bottomとmargin-bottomため0.5em値をキープ

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

2. 内部からの余白を削除します。用最後pための下部の余白と上余白を最初p

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

のためにこれはのpaddingは今上下に0.5emスペースを担当する意味 - 折りたたむことができ210 および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>