CHAPTER 13 ■ BLOCKSBlock Space Remover
Problem You want to bring two blocks closer together because they are closely related. You also want
to remove a precise amount of space between blocks based on their location in the markup.
For example, you want to remove some or all of the top margin before the first child
element in a block; or you want to remove some or all of the bottom margin after the last
child element in a block; or you want to remove some or all of the margin between two
specific blocks.
Solution To remove vertical space between any two blocks, you can insert an empty division between
the blocks. You can assign a negative top margin to the division to remove the desired
amount of space. For example, if you want to remove 32 pixels of space, you can insert a
division assigned to the rule margin-top:-32px.
Pattern HTML CSS
.CLASS { margin-top:-VALUE; }
Location This pattern applies to block elements.
Explanation This pattern is the opposite of the Block Spacer design pattern and has the exact opposite
structural meaning. By drawing two blocks closer together, the markup indicates they are
more closely related. The class name you assign to the block space remover element should
reflect this purpose.
Furthermore, the structural relationship created by a block space remover or block spacer
element does not belong to either block. It belongs in between the blocks because it links or
separates them. It is best to use structural markup to create structural meaning because it is
easiest to maintain—you can see it and manipulate it directly in the HTML.
Advantages Unlike the block spacer, the block space remover does not uncollapse margins. This makes
using the block spacer remover simpler and more predictable.
Disadvantages This design pattern requires an extra element to be inserted into the markup for each space
you want to remove. If you remove too much space, you can cause blocks to overlap.
Example In the example, each paragraph has been assigned to top and bottom margins of 32 pixels.
The two paragraphs in the second section are preceded and followed by block space
removers, which remove the space before, between, and after these paragraphs.
Related to Visual Structure, Collapsed Margins, Block Spacer; Margin (Chapter 6)