Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 11 ■ SPACING CONTENT


Inline Spacer


HTML


<h1>Inline Spacer</h1>

<p>Just like you can use <code><br /></code> to insert vertical space
into content, <br /> you can use an inline spacer to insert and control
horizontal space.
<span class="space"> </span>The inline spacer is a marker element
that emphasizes the space in between content.
<span class="space"> </span>You use it when you do <em>not</em> want to
mark up <em>content</em>, but you still want to control the amount of space
in between content.</p>

<p>For example, if your page design requires extra space before sentences,
it is not a good idea to mark up sentences, because that would prevent you from
cutting across sentence boundaries with additional markup.
<span class="space"> </span>Marking up the first word of a sentence would not
be semantically accurate because the extra space separates sentences not words.
<span class="space"> </span>The inline spacer solves this problem
because it does not interfere with other markup.
<span class="space"> </span>It is also semantically correct
because its purpose is to mark up and emphasize space.</p>

CSS


.space { margin-left:0.5em; }
Free download pdf