CHAPTER 11 ■ SPACING CONTENT
Blocked
HTML
<h1>Blocked</h1><p>The Blocked design pattern displays an inline element as a block element
that can be styled in every way as a block element.
<span class="blocked">This is an inline element displayed as a block.
Its first line is indented and it has collapsing vertical margins.</span></p><div class=”vcard”>
<span class="fn org">Name</span>
<p class=”adr”>
<span class="street-address">Street</span>
<span class=”locality”>City</span>,
<span class=”region”>State</span>,
<span class=”postal-code”>Zip Code</span>
<span class=”country-name”>Country</span>
</p>
<a class=”email” href=”mailto:[email protected]”>[email protected]</a>
</div>CSS
.blocked { display:block; text-indent:2em; margin-top:5px; }.vcard { border:4px solid green; padding:10px; font-style:italic;}
.vcard .org { display:block; }
.vcard .street-address { display:block; }
.vcard .adr { display:block; }
.vcard .email { display:block; }