CHAPTER 11 ■ SPACING CONTENTLine Break
Problem You want to insert a line break. You also want to add or reduce the amount of vertical space
between the lines.
Solutions Break
You can use HTML’s break element,
, to move content to a new line. The height of the
(^) line following the break is determined by the line’s content.
Double Break
You can move content to a new line and add extra space between the lines by inserting two
elements in a row with nothing in between them. You can use line-height to style
the second
to control the amount of extra space inserted.
Line Break
You can move content to a new line and add extra space between lines or even shrink the
space between the lines by inserting an empty and using display:block to display it
as a block. You can use margin-top:+VALUE to insert additional space between the lines. You
can use margin-top:-VALUE to shrink the space between the lines.
Blocked
You can apply the Blocked design pattern to an existing inline element to move the element
onto a new line.^
Patterns Break
Double Break
.br { line-height:+VALUE; }
Line Break
.lb { display:block; margin-top:±VALUE; }
Blocked
.lb { display:block; margin-top:±VALUE; }
Location This pattern can be used in any inline context.
Trade-offs Two
elements can add extra space between lines, but they cannot reduce space
between lines. A displayed as a block can insert or reduce space between lines and
requires only a single element.
Example In the example, I named classes descriptively to make it easier to match the code to the
screenshot. In a real document, I would name classes functionally because it makes it easier
to restyle the document later.
Related to Inline Horizontal Rule; Block Horizontal Rule, Block Spacer, Block Space Remover (Chapter
13)