Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Block Spacer

HTML

<h1>Block Spacer</h1>

<p>This paragraph is not followed by a block spacer.</p>

<p>This paragraph is followed by a block spacer.</p>

<div class="spacer-large"></div>

<p>This paragraph is preceded by the same block spacer.</p>

<p>This paragraph is not preceded by a block spacer.</p>

CSS

p { margin:0; padding:5px; background-color:gold;

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

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

.spacer-large { padding-bottom:32px; }