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.
Now, wouldn’t * { margin:0; padding:0; } cancel out the margins and padding on that blockquote/p combo??
he put that in his css :)
https://css-tricks.com/examples/BlockquoteDouble/css/style.css
The universal selector (*) will be used when you do not specify the css property for blockquote; but when you specify it, it would override the * property and use the defined property i.e. margin-bottom:20px
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.
You know that first children get all of the attention :P
I agree man.
Some douchebag must have made the call though.
I would have also thought a CSS-reset would avoid this issue, wouldn’t it?
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.
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.
Great.
Very usefull information.
I had similar problem with my CSS Typography Framework Azbuka http://code.google.com/p/azbuka/. I used this solution: blockquote > p { padding:0;}
I’ve always found space before to be more useful and reliable than space after anyway. Bottom margins just don’t play nice.
Sounds like the issue is the “p” tag which I stopped using a while ago. Useless in general.
Theres no issue with p tags nor is it wise not to use them.
Really? There are no paragraph on your designs? mmm… I think you are joking
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
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.
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.
Excellent. Many thanks.
Thanks Mike + Norman. Made sense of the “problem”.
Nice blockquote example, its always nice to be able to style the p tags, and like the solutions, Thank you. LT
IE 7 and 8 implement :first-child but not :last-child?! Wow. You learn something new every day!
Well, :last-child is actually CSS3, so of course < IE8 don't have it implemented.
always one step behind
Its fairly logical to use the adjacent selector to select stuff that is adjacent to something else:
Works like a charm and it is pretty easy
Won’t work with IE6, will it?
… just like about any other case on this page, ie7.js (what’s in a name) and probably the given solution. But you are 100% right, spot on!
So of all the solutions on this page, none of them are meant to work on ie6 (they might, no doubt) but at least this one is semanticly correct and isn’t a hack…
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).
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.
Hi!
What about simply setting:
blockquote { padding-bottom: 0; background: #eee; }
?
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
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.
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?
Oh, that was news to me! Thanks for pointing it out.
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 }
according to the picture
doesn’t the “too much space” caused by default padding-bottom CSS property of blockquote?
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?
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!
i want to display css in blockquote css