Pro HTML5 and CSS3 Design Patterns

CHAPTER 2 HTML DESIGN PATTERNS

HTML Whitespace

HTML

<h1>HTML Whitespace</h1>

<p> start middle   	 <span> </span> <span></span>


 
 end </p>

<h2>Controlling Where Whitespace Collapses</h2>

<p>start<span class="border"> middle </span> end<em>—inside element</em></p>

<p>start <span class="border"> middle</span> end<em>—outside element</em></p>

<h2>Embedding Whitespace Inside Tags</h2>

<p>start<span

class

=

"spaced"

>middle</span

>end</p>

<h2>Embedding Space Entities</h2>

<code>&zwnj; </code><span class="border">‌</span>  

<code>&thinsp; </code><span class="border"> </span>  

<code>&nbsp; </code><span class="border"> </span>  

<code>&ensp; </code><span class="border"> </span>  

<code>&emsp; </code><span class="border"> </span>  

CSS

em { padding-left:50px; }

p { font-family:monospace; font-size:18px; }

*.border { font-weight:bold;

border-left:2px solid black; border-right:2px solid black; }