Grow your CSS skills. Land your dream job.

Blockquote Bulge

Published by Chris Coyier

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.

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.

Comments

  1. Permalink to comment#

    Now, wouldn’t * { margin:0; padding:0; } cancel out the margins and padding on that blockquote/p combo??

  2. Permalink to comment#

    This drives me insane. Why would the IE developers think “Ok, we’ll implement first-child now, but let’s not bother with last-child”? I can’t see any good reason for this other than apathy. Grrr.

    Thanks for the post though, good to think about. I might have a go with IE7.js. At the moment I don’t bother with last-child, I just use a .last class on anything that needs it. I’d rather do it with the CSS, but I’ve never found it worth the hassle to beat IE into shape.

  3. Permalink to comment#

    I would have also thought a CSS-reset would avoid this issue, wouldn’t it?

    • Permalink to comment#

      Nope, it doesn’t because the extra space is coming from the fact that the paragraph tag is in the blockquote and you (assuming role as designer) defined blockquotes and paragraphs to have a margin of x, so the margins/padding on both elements are adding together (to create 2x) so to correct this the margin/padding needs to be removed from one of the elements in order to make it fit with the design.

  4. Permalink to comment#

    Thanks for this, but is the IE7.js for IE7 only and not IE6?

    • It’s a bit of a misleading name as actually the IE7.js can be used with IE6, 7 & 8. But a word of caution. When I first started wrangling with CSS and felt the all-too familiar dismay of my apparently prefect layout breaking in any MS browser, I read about the IE7.js script and thought all my birthdays had come at once. It seemed to promise to fix absolutely anything problematic with CSS in IE. From now on I thought all my websites would be a breeze. Since then I have found that I’m actually better off using conditional comments and specific workarounds as perversely most of my layouts break worse than ever with IE7.js applied. Now, this could be down to some gaps in my own knowledge, but to my less-than-expert eye it appears to be introducing new problems that were not there before, and it seems to cause me a lot less anguish and hair loss to find another solution. Although I’d be only too happy to learn otherwise.

  5. Andrey Luiz
    Permalink to comment#

    Great.
    Very usefull information.

  6. I had similar problem with my CSS Typography Framework Azbuka http://code.google.com/p/azbuka/. I used this solution: blockquote > p { padding:0;}

  7. Permalink to comment#

    I’ve always found space before to be more useful and reliable than space after anyway. Bottom margins just don’t play nice.

  8. Permalink to comment#

    Sounds like the issue is the “p” tag which I stopped using a while ago. Useless in general.

  9. Permalink to comment#

    I think I’m missing the point of this, but this seems like a reset problem.

    Here’s how I would get rid of the problem:

    http://jsbin.com/ulove4

  10. Permalink to comment#

    It’s not even a reset thing is it? The ‘problem’ only happens if you want to define all your white space inside the blockquotes by styling the p tags. Your example, Cory, shares the space between the blockquote and the p tags. Either your example or :first-child will work in practice.

  11. Permalink to comment#

    Its not a reset problem or anything like that. Its just that padding on the outer container won’t collapse if there are inner elements with margin.. simple as that. One solution would be to use margin-top on the inner p tags. This way you could use :first-child on the first p tag.

  12. Excellent. Many thanks.

  13. Permalink to comment#

    Thanks Mike + Norman. Made sense of the “problem”.

  14. Nice blockquote example, its always nice to be able to style the p tags, and like the solutions, Thank you. LT

  15. Permalink to comment#

    IE 7 and 8 implement :first-child but not :last-child?! Wow. You learn something new every day!

  16. Permalink to comment#

    Try this piece of work if you’re concerned with css selectors in IE. It also provides css3 selectors and works with a number of js libraries: http://selectivizr.com/ (formerly known as ie-css3.js).

  17. I would just avoid using blockquotes all together or make sure it had no style so that only the p had control, cleaner that way, your less likely to discover unexpected drawbacks further down the line.

  18. Permalink to comment#

    Hi!
    What about simply setting:
    blockquote { padding-bottom: 0; background: #eee; }

    ?

    • Norman
      Permalink to comment#

      you need at least on pixel or else the margin of the last p tag will collapse resulting in no padding between p and blockquote

  19. Anders
    Permalink to comment#

    I tend to stick to the :last-child solution provided in the blog post.

    And by the way, just a minor thing – for the markup to validate, the content inside a blockquote needs to live inside a block level element. Hence your first code example wouldn’t validate.

    • JeffM
      Permalink to comment#

      It does validate as HTML5, which is what this page’s doctype is. My first reaction was the same, I have to say. But I checked it out on test page and lo-and-behold…

      Perhaps Chris could slip a mention of that into the article?

    • Anders
      Permalink to comment#

      Oh, that was news to me! Thanks for pointing it out.

  20. Permalink to comment#

    How about sytematically putting paragraphs within blockquotes, regardless of how many there are? That way you could only style blockquotes top-padding and blockquote p bottom-margin:

    blockquote { padding-top:10px }
    blockquote p { margin-bottom:10px }

  21. Permalink to comment#

    according to the picture
    doesn’t the “too much space” caused by default padding-bottom CSS property of blockquote?

  22. In your example: blockquote, p { margin-bottom: 20px; } isn’t the comma not needed, and should actually just be a space so that declaration only affects paragraphs inside a blockquote?

  23. Daniel
    Permalink to comment#

    Surprisingly, I had already figured this out on my own! Including the :first-child/:last-child bug… wow IE, really?

    I’d say I’m coming along as a web developer!

  24. i want to display css in blockquote css

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".