Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Inline Decoration

Problem You want to insert a decoration into the content, such as a block of color, a styled border, or
a background image. You want to move the decoration closer or further away from previous
and following content. You do not want to insert an image because you want pure
decoration—not content.

Solution^

HTML Insert a span containing nonbreaking space into the content. Assign to it a class or ID of
your choosing.

CSS Apply styles to your chosen class or ID as follows:
Use padding-left to set the width of the decoration.
Use font-size to set the height of the decoration.
Use vertical-align to move the decoration up or down.
Use line-height to size the height of the line to fit the decoration.
Use a positive value in margin-left to move the decoration to the right.
Use a negative value in margin-left to move the decoration to the left. A large enough value
will cause the decoration to overlap previous content.
Use a positive value in margin-right to move the following content to the right and farther
away from the decoration.
Use a negative value in margin-right to move the following content to the left and closer to
the decoration. A large enough value will cause the content to overlap the decoration.
Use border to insert a border on the left, right, top, or bottom.
Use background-color to display a background color in the padding area.
Use background-image to display an image in the padding area.
Use background-position to position the background image.

Pattern^

HTML  

CSS .decoration { padding-left:+VALUE;^
font-size:+VALUE;
vertical-align:±VALUE;
line-height:+VALUE;
margin-left:±VALUE; margin-right:±VALUE;
border-left:+W S C; border-right:+W S C;
background-color:COLOR;
background-image:url("FILE.EXT"); }

Location This pattern works anywhere you can use an inline element.

Trade-offs Unlike the Inline Spacer, the Inline Decoration requires the span to contain a nonbreaking
space and to have a closing tag. Without the closing tag, a browser renders the background
color or image underneath the following text. Without a nonbreaking space, a browser
ignores padding and borders.

Related to Inline Spacer; Hanging Alert, Run-In Alert, Floating Alert, Left Marginal Alert, Right Marginal
Alert (Chapter 20)