2.3.3 Add extra lead before and after block quotations

However the block quotations are set, there must be a visual distinction between main text and quotation, and again between the quotation and subsequent text.”

Adding a gap between a block quotation and the main text is best achieved by applying a top and bottom margin to the blockquote. By default, browsers usually apply a left and right margin as well. You may wish to remove this altogether by setting the margins to zero. If you wish to retain the indent, a more consistent layout can be achieved by applying left and right margins equal to the top and bottom margins.

blockquote {
  margin:1.5em;
}

As explained in §2.2.2, the margins should be sized so that the rhythm of the text is maintained. Where the blockquote text size is the same as the main text, the separating margins should be set equal to the line-height.

Rhythm & Proportion

§ Blocks & Paragraphs

Reference

Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst

Cover of ‘Web Typography’ by Richard Rutter