CHAPTER 13 ■ BLOCKSBlock Spacer
Problem You want to put space between two blocks to show that they do not belong together. You
want the separation to imply that a new series of thoughts follows, but unlike the horizontal
rule, you do not want to imply that a whole new section follows. You want the structure of
the markup to mirror the structure of the content, which has a slight separation of thought.
You also want to control the amount of vertical space inserted—the more space, the
stronger the structural separation of content.
Solution You can insert an empty division between the blocks. You can assign a specific amount of
bottom or top padding to the division to insert the desired amount of space.
Since the purpose of this design pattern is to separate two blocks, the class name you assign
to the block spacer element should reflect this purpose.
Pattern HTML
CSS
^ .CLASS { padding-bottom:+VALUE; }^
Location This pattern applies to block elements.
Advantages The block spacer is best used when you want the markup to communicate a separation
between blocks because this reflects the meaning of the content. It is a simple, reliable, and
semantic way to insert extra vertical space between any two blocks.
Disadvantages This design pattern requires an extra element to be inserted into the markup. You may be
tempted to use this for visual effects rather than for its structural purpose. In that case, you
should assign a margin to one of the blocks.
Tips Because a block spacer is inserted between two elements, it has the side effect of stopping
the previous block’s bottom margin from collapsing into the following block’s top margin.
Thus, you can insert a 1-pixel block spacer between blocks to uncollapse their margins (and
add one extra pixel of space). Note that a zero-pixel block spacer does not uncollapse
margins.
You could insert the padding-bottom rule directly inside the style attribute of the spacer
division. I recommend against this because you will likely need to change this value as
margins in the style sheet change. I find it speeds software development to keep all style
rules in style sheets. I also avoid using class names that imply specific measurements, such
as spacer32px, because the amount of space removed is likely to change.
Related to Visual Structure, Block Space Remover, Horizontal Rule; Padding (Chapter 6); Spacing,
Inline Spacer, Linebreak, Inline Horizontal Rule (Chapter 11)