• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8. Space Around Boxes > Collapsing Margins

Collapsing Margins

The margins above and below elements are not simply added together to reach a total amount of space between the two elements. If they were, you’d often end up with a bit more space between elements than you want. Instead, the browser discards the smaller margin and uses the larger margin to space apart the two elements. This process is called collapsing margins. Collapsing margins affects only the top and bottom margins.

For example, suppose a P follows an H1 – a common situation – and that the P has less space above it than the H1 has below it – also common. To be more specific, assume the P has 1pc (1pica = 12pt) space above it and the H1 has 2pc space below it. The browser discards the 1pc space and puts only 2pc space between the two elements; it does not add the two and use the total (3pc space).


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint