Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Padded Content

HTML

<h1>Padded Content</h1>

<p>Padding sets apart text to emphasize it.

Left and right padding inserts horizontal space before and after content.

Padded content can be

<br /><span class="padded-mild">a letter...</span>→

<br /><span class="padded-emphasized">a word...</span>→

<br /><span class="padded-strong">a phrase...</span>→

<br /><span class="padded-extreme">a paragraph...</span>→ etc.

<span class="padded-strong-BA">This multi-line text is padded as an

entire block rather than padded on each line.

</span>

</p>

CSS

.padded-mild { padding-left:1em; padding-right:1em; line-height:1em; }

.padded-emphasized { padding-left:2em; padding-right:2em; line-height:2em; }

.padded-strong { padding-left:3em; padding-right:3em; line-height:3em; }

.padded-extreme { padding-left:4em; padding-right:4em; line-height:4em; }

.padded-strong-BA { display:block; padding:2em 5em; }