<br>

Definition

The <br> element is used to create a line break in a block of text. You typically use it when you want to break up parts of a paragraph onto separate lines.

Here’s how to use the <br> element

<address>
  11 Moon Street<br />
  New York, NY 10014
</address>

In this example, the <br> element is used to create a line break between the street address and the city, state and zip code. It’s reasonable to use the <br> element here because you always want the street name on its own line.

The spacing between the street address and the state, city and zip code probably shouldn’t be too far apart. If you wanted to make more space between these two lines, you’d use something like line-height in order to control this.

Here’s not to NOT use the <br> element

<p>
  This is a normal paragraph of text. <br /><br />It's not very long, but it's
  long enough to demonstrate that you should not make a line break with the `<br />` element.
</p>

In this example, the effect is that you have two separate paragraphs. And you’ve achieved that with this snippet of code.

It’s recommended to use two separate <p> elements because it’s more semantic. It also makes it easier to style the paragraphs separately if you need to.

A better way to express the above example would be this:

<p>
  This is a normal paragraph of text.
</p>

<p>
  It's not very long, but it's long enough to demonstrate that you should not make a line break with the `<br />` element.
</p>

Can you style the <br /> element with CSS?

You can. But why would you? You can set a margin on the <br> element, but you probably shouldn’t. It’s bad practice and encourages patterns potentially harmful for accessibility.

You can, however, set display: none on <br /> elements to hide them. You’d want to do this if a line break isn’t being used on different breakpoints.

There are so many better ways to do this with CSS, so I would use this approach with a grain of salt.

Let’s look at an example:

<style>
  @media (min-width: 700px) {
    br.hide-at-700px {
      display: none;
    }
  }
</style>

<p><strong>This text</strong> <br class="hide-at-700px" />won't have a line break when your browser is 700px wide.</p>

To give a better example of how to achieve the line break with the code above, here’s a slightly different approach.

<style>
  strong.inline-at-700px {
    display: block;
  }

  @media (min-width: 700px) {
    strong.inline-at-700px {
      display: inline;
    }
  }
</style>

<p><strong class="inline-at-700px">This text</strong> won't have a line break when your browser is 700px wide.</p>