Blockquote Bulge

In HTML, a block of text being quoted from elsewhere is marked up like this:

<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>

In your CSS, you’ll likely have special styling for these. Perhaps a bit of a background and padding:

blockquote { padding: 10px; background: #eee; }

If the quote is multiple paragraphs, there may be paragraphs nested within the blockquote (both are block-level elements so that’s fine). Quotes are also likely to be within larger areas of text, so let’s assume paragraphs around it:

<p>Preceding paragraph</p>

<blockquote>
   <p>Hey, I'm a block of text from elsewhere.</p>
   <p>And I'm another one.</p>
</blockquote>

<p>Succeeding paragraph</p>

And of course we need some spacing after these blocks so paragraphs have breathing room and look like paragraphs:

blockquote, p { margin-bottom: 20px; }

Now we have a classic problem on our hands. The margin from the last paragraph inside the blockquote is going to push down the size of the blockquote, making and un-even amount of space around the quote.

Example problem

This can be fixed by removing the bottom padding from the last paragraph inside the blockquote.

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

Note that :last-child is supported in pretty much everything except IE 8 and down. If that’s a big issue, try this.

Or, for better browser support without JavaScript, you can get IE7/IE8 support by using:

blockquote, p { margin-top: 20px; }
blockquote p:first-child { margin-top: 0; }

… as those two browsers support :first-child but not :last-child.

Collapsing Margins

Note that the above circumstance only comes into play if you are using padding or border on your blockquotes. If you used only margins, this problem would never come up. A paragraph with 20px of bottom margin contained within a blockquote with a bottom margin of 20px will still only push away its neighbor to the south 20px. This is not a bug, but is normal margin collapsing. If you want to know more Andy Budd has an article from seven years ago with everything you’d ever want to know.