DEV Community

Cover image for Only adjacent elements collapse
Davisson
Davisson

Posted on

Only adjacent elements collapse

It is somewhat common to use the <br /> tag (a line-break) to increase space between block elements.

<style>
  p {
    margin-top: 32px;
    margin-bottom: 32px;
  }
</style>
<p>Paragraph One</p>
<br />
<p>Paragraph Two</p>
Enter fullscreen mode Exit fullscreen mode

Regrettably, this has an adverse effect on our margins:

Image description

The <br /> tag is invisible and empty, but any element between two others will block margins from collapsing. Elements need to be adjacent in the DOM for their margins to collapse*.

Top comments (0)