Pro HTML5 and CSS3 Design Patterns

CHAPTER 19 ■ CALLOUTS AND QUOTES

Inline Block Quote

Problem You want to create a block quote inside a paragraph.
You cannot use

because it cannot be embedded in a paragraph since it is a
block element. You should not use the element, for the reasons cited in the discussion
of the Inline Quote design pattern.

Solution You can embed the block quote in instead of

or
. You can use display:block on the span and all child elements to display them as
blocks. This is the key ingredient of this design pattern. Once all the elements are displayed
as blocks, the rest of the rules work like the Block Quote design pattern.

Pattern^

HTML ^
QUOTE

MORE QUOTE
CITATION

CSS
.blockquote { display:block;
width:+VALUE; margin:+VALUE;
position:relative; left:±VALUE%;
padding-top:+VALUE; padding-left:+VALUE;
background:url("FILE.EXT") no-repeat top left; }

.blockquote span { display:block;

padding-bottom:+VALUE; padding-right:+VALUE;

background:url("FILE.EXT") no-repeat bottom right; }

.blockquote cite { display:block; }

Location This pattern works in any inline context.

Tips You can insert line breaks to simulate separate paragraphs within the quote.
It is better to use

for block quotes because search engines and document
processors understand the meaning of

. Search engines give greater
importance to content in

and .

Related to Center Callout, Block Quote, Inline Quote; Display, Block Box (Chapter 4); Width (Chapter
5); Margin, Padding, Background (Chapter 6); Relative (Chapter 7); Offset Relative (Chapter
8); Blocked (Chapter 11)