Pro HTML5 and CSS3 Design Patterns

CHAPTER 13 ■ BLOCKS

Collapsed Margins

HTML

<h1>Collapsed Margins</h1>

<div><p class="collapsed">Margins collapsed into parent's ↑↓</p></div>

<div class="border">

<p class="collapsed">Margins not collapsed into parent's ↑↓</p></div>

<div class="border">

<p class="collapsed">Collapsed sibling margins ↓</p>

<p class="collapsed">Collapsed sibling margins ↑</p>

<p class="uncollapsed1">Uncollapsed (transparent padding) ↑↓</p>

<p class="uncollapsed2">Uncollapsed (transparent border) ↑</p></div>

CSS

div { margin:10px; padding-left:30px; background-color:gold;

background-image: url("ruler.gif"); background-repeat:repeat-y; }

.border { border:2px solid black; }

.collapsed { margin-top:20px; margin-bottom:20px; }

.uncollapsed1 { margin-top:0; margin-bottom:0;

padding-top:20px; padding-bottom:20px;

background-color:transparent; }

.uncollapsed2 { margin-top:0; margin-bottom:0;

border-top:20px solid transparent;

border-bottom:20px solid transparent; }