Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Run-In

HTML

<h1>Run-In</h1>

<section>

<h2>Normal Heading</h2>

<p class="indent">This is a paragraph following the heading. Notice

how the previous heading and this paragraph are separate blocks.</p>

<p>This is another paragraph following the first paragraph.</p></section>

<section>

<div class="run-in-container indent">

<h2 class="run-in">Run-In Heading</h2>

<p class="run-in">This is a paragraph following the heading. Notice how

the heading runs into the first line of this paragraph, and notice how

its styles are transferred to the run-in container.</p>

</div>

<p>This is another paragraph following the first paragraph.</p></section>

CSS

section { padding:10px; margin-bottom:20px; background-color:gold;

border-left:1px solid gray; border-right:2px solid black;

border-top:1px solid gray; border-bottom:2px solid black; display: block; }

.indent { margin-left:20px; border-left:4px solid black; padding-left:20px; }

.run-in { display:inline; }

.run-in-container h2 { padding-right:20px; }

.run-in-container p { font-style:italic; }