CHAPTER 11 ■ SPACING CONTENTInline Spacer
Problem You want to insert a precise amount of horizontal space into inline content.^
Solution To create an inline spacer, you can insert a span with a class or ID of your choosing and set
the amount of space using margin-left. A negative value in margin-left causes
neighboring elements to overlap. Because you are styling space, it is a good idea to put
whitespace in between the span’s start and end tags, although this is not required for this
design pattern to work.
Pattern^
HTML ^
CSS .space { margin-left:±VALUE; }
Location This pattern works anywhere you can use an inline element.
Usage In general, the best way to space content is to embed it within an element and style the
element with margin. This begs the question, why would you ever need to use an inline
spacer?
Because the inline spacer is an empty element, it can be placed anywhere without
interfering with the nesting of other elements. In those rare cases when the current markup
does not align with where you need to control space, you can insert an inline spacer without
compromising or complicating the nesting. This is why
and
are empty
marker elements.
The inline spacer has the same purpose as
and
. It inserts space without
marking up content. In other words, it marks and emphasizes the presence of space. It has
semantic meaning: it indicates that the following content is set apart from the previous
content—because that is what space does. The larger the space, the stronger the meaning.
and
insert vertical space, and an inline spacer inserts horizontal space.
If emphasizing or deemphasizing space is the point, it is semantically correct to mark up
space, because marking up content would emphasize the content—not the space in
between.
In the past, spacer GIFs were improperly used for this purpose. Images are content—not
spacing. Screenreaders announce the presence of these images, and the latency involved in
downloading them slows the rendering of the document. The inline spacer has none of
these problems.
Variations You can use pixels or a fixed measurement to size the space. You can use a percentage to
scale the size proportional to the width of the containing block.
Tips This design pattern also works with an empty span, , or an XML-style empty
span, . Like
, works in all major browsers, and validates as valid
XHTML, but not as valid HTML.
Related to Inline Decoration, Line Break; Block Spacer (Chapter 13)