Funny thing – recently I used CSS styling for HTML <br> tag, which remembered me another situation when I saw that. So I decide to write them down, in case if anyone is interested.

1. Legacy layout

Once upon a time, there was a project with two divs, which depending on screen width, should be positioned horizontally or vertically. The solution – separate the divs with <br> tag…

…so that now, if you want the divs next to each other, you can style the <br> tag! Of course, we’re talking display: none; property:

You can switch between vertical and horizontal layout by only setting styles to this <br> tag, so we can do something like:

.wrapper {
  @media screen and (min-width: 992px) {
    br {
      display: none;
    }
  }
}

(note that without wrapper we could easily break other parts of the application)

The solution doesn’t fit 2018 (flexbox, anyone?) but I have to say – is pretty smart. (and I wasn’t the author – I just happened to do some fixes on such layout)

2. Legacy markdown processor

Another situation: on the backend side, there was the processor from markdown to HTML. Either by invalid inputs or invalid implementation, the output HTML from it was not always correct. There were some weird <br> tags all over the places, something like this:

<div class="description">
  <br>
  <h1>Title</h1>
  <br>
  <br>
  <br>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

That, in turn, resulted in an ugly HTML page. The client realized that and wanted to change it.

How would you approach this?

The solution for me was:

.description {
  br {
    display: none;
  }

  h1 {
    margin-bottom: 5px;
  }
}

Note that both cases share “legacy” burden. I believe there’s no room for styling <br> in greenfields, or when you have enough time to refactor first. (Flexbox master race!)

PS. Did you know that Google prefers <br> over <br />?