Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Spacing

HTML

<h1>Spacing</h1>

<p>This paragraph is normal. It has no indentation, margins, padding,

letter spacing, word spacing, text justification, or line spacing.</p>

<p class="elegant">This paragraph has many forms of spacing. The first line of text

is indented. Margins indent the paragraph on all sides. Padding puts space

between the paragraph and its borders. Letters have 1 extra pixel of space between

them. Words have 2 extra pixels of space between them. Text is justified, which

adds extra space between words to align text to the left and right edges. And

lines have extra spacing between them.</p>

CSS

.elegant { margin-left:40px; margin-right:80px;

margin-top:30px; margin-bottom:30px;

padding-top:25px; padding-bottom:25px;

letter-spacing:1px;

word-spacing:2px;

line-height:1.7em;

text-indent:40px;

text-align:justify;

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