Collapsing margins/paddings at the bottom of blockquote

Question

Here is jsfiddle with live demo.

I want to make padding at top and at bottom of the blockquote to be equal (0.5em to be precise).

At first look, basic and trivial task, but I faced with a problem - collapsing margins/paddings (if I understand it right) at the bottom of blockquote.

I found some workarounds (like adding a 1px border or padding), but it surely very dirty.

So, the question: Is there a good way to make padding at top and at bottom of the blockquotes to be equal, like shown in the image?

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

have you tried removing the margin-bottom of the last paragraph and applying padding-bottom:.5em to the blockquote? — GvM, Nov 02 '16 at 05:00
Did you mean `blockquote p:last-child { margin-bottom: 0; }`? Yes, it's another workaround. It's not a good idea, because sometimes it will be another elements (not `p`s) at the bottom of blockquote. — john c. j., Nov 02 '16 at 05:08

score 0 · Answer 1 · answered Nov 02 '16 at 05:15

0

Have updated your fiddle

workaround done

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

answered Nov 02 '16 at 05:15

Shubham Sharma

315
2
18

score 0 · Answer 2 · answered Nov 02 '16 at 05:22

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>

you can do it like this.

score 0 · Answer 3 · edited May 23 '17 at 12:19

You are right, collpasing margins (more info about collapsing margins here) and paddings are at play here - the easiest thing to do is:

Keep the 0.5em value for padding-top, padding-bottom and margin-bottom for blockquote:

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

Remove the margins from inside the blockquote that can collapse - the bottom margin for the last p and the top margin for the first p
```
blockquote p:last-child {
  margin-bottom: 0;
}
blockquote p:first-child {
  margin-top: 0;
}
```

This means the padding of blockquote will now be responsible for the 0.5em space at the top and bottom within the blockquote and margin-bottom will act as the separation between them.

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>

Collapsing margins/paddings at the bottom of blockquote

3 Answers3