Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Preserved

Problem You want to selectively preserve whitespace around text and objects that you insert into
the HTML document. For example, you want to preserve whitespace in code. You also
may want to insert specific amounts of whitespace into your document without having to
track the number of
elements and   entities you need to insert to achieve
the desired effect.

Solution When whitespace is an intrinsic part of the content, you can mark up the content with

 to preserve the whitespace. This identifies whitespace as part of the content and

preserves it. 
 also works in non-CSS browsers.

When whitespace is decorative or when you cannot use 
, you can use white-

space:pre to prevent whitespace from being collapsed.

You can assign white-space:pre to a span containing nothing but whitespace to direct

the browser to render that whitespace—although this is probably not a good idea, as

explained under “Disadvantages.”

Pattern^


HTML 
 CONTENT 
^


CSS SELECTOR { white-space:pre; }^

SELECTOR { white-space:normal; }


Location white-space:pre applies equally well to any type of element.


Advantages white-space:pre has several advantages over 
. It can preserve whitespace in

existing markup that you cannot modify to include 
. It allows preserved whitespace

to intermingle with images, objects, and any other type of element. (The HTML

specification prevents 
 from containing ,