Don’t use BR for vertical spacing


Use CSS instead. When <br> is used for vertical spacing it drives me crazy. Among my coworkers it is widely known that I don’t approve of <br> abuse. One recently wrote in a source control commit comment, “Removed some nasty <br> tags to keep Jason from going postal on someone.” And I appreciated that.

Why use CSS instead of <br> tags?

  1. It’s a stylistic concern, not a content concern, and so it belongs in the CSS with all the other stylistic concerns.
  2. It’s easier to adjust and fine tune the vertical space in a CSS by adjusting the margins or paddings in em’s instead of full lines.
  3. This one’s a little subtle, but very clear when you run into it: In the case of conditional content, where you may not know exactly what comes before or after the block you’re working on, the fact that CSS margins overlap turns out to be The Right Thing.

In summary:


(This was an example of #3. Everything looked fine as long as both the MultiView and the Panel were visible, but when one of them was not visible [due to security or whatever] then the vertical spacing was a visual train wreck.)

This entry was posted in HTML, Programming. Bookmark the permalink.