CHAPTER 19 ■ CALLOUTS AND QUOTES
Inline Block Quote
HTML
<h1>Inline Block Quote</h1>
<p>This quote is embedded in a paragraph, but looks like a block quote.
<span class="blockquote"><span>
An inline block quote is marked up with inline elements, but looks like a
block quote because its elements are rendered using <code>display:block</code>.
<br /> <br />I embedded a decorative span in this example to display
a graphical closing quote.
<cite>Pro HTML5 and CSS3 Design Patterns</cite></span></span> </p>
CSS
.blockquote { display:block; width:500px; margin:10px auto;
position:relative; left:0%; text-align:justify;
line-height:1.3em; color:black;
padding-top:40px; padding-left:40px;
background:url("dq1.jpg") no-repeat top left white; }
.blockquote span { display:block;
padding-bottom:20px; padding-right:40px;
background:url("dq2.jpg") no-repeat bottom right; }
.blockquote cite { display:block; text-align:right; font-size:0.9em; }