Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Block Space Remover

HTML

<h1>Block Space Remover</h1>

<div class="section">

<p>This paragraph has 32-pixel top and bottom margins.</p>

<p>This paragraph has 32-pixel top and bottom margins.</p>

</div>

<section>

<div class="space-remover-large"></div>

<p>This paragraph has 32-pixel top and bottom margins,

but it is preceded and followed by a block space remover.</p>

<div class="space-remover-large"></div>

<p>This paragraph has 32-pixel top and bottom margins,

but it is preceded and followed by a block space remover.</p>

<div class="space-remover-large"></div>

</section>

CSS

section { border:2px solid black; margin-bottom:32px; display:block; }

p { margin-top:32px; margin-bottom:32px; 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; }

.space-remover-large { margin-top:-32px; }