This might seem like a bit of a workaround, but in my experience with chrome 41 on ubuntu, I've found a way to slightly customize the styling of the <br> element:

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

By adjusting the font size, I'm able to control the spacing.

Update

To gauge how different browsers respond over time, I conducted some test cases.

*{outline: 1px solid hotpink;}
div {
  display: inline-block;
  width: 10rem;
  margin-top: 0;
  vertical-align: top;
}

h2 {
  display: block;
  height: 3rem;
  margin-top:0;
}

.old br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
  outline: red;
}

.just-font br {
  content: "";
  display: block;
  font-size: 200%;
}
.just-margin br {
  content: "";
  display: block;
  margin: 2em;
}

.brbr br {
  content: "";
  display: block;
  font-size: 100%;
  height: 1em;
  outline: red;
  display: block;
}

<div class="raw">
  <h2>Raw <code>br</code>rrrrs</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
  
<div class="old">
  <h2>margin & font size</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
  
<div class="just-font">
  <h2>only font size</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>

 <div class="just-margin">
  <h2>only margin</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>
   
<div class="brbr">
  <h2><code>br</code>others vs only <code>br</code>s</h2>
  bla<BR><BR>bla<BR>bla<BR><BR>bla
</div>

Each test case exhibited its own peculiar behavior. Out of all of them, only the final one seemed to accurately distinguish between one and two line breaks.

Consider exploring the line-height property. It's important to note that attempting to style the <br> tag may not be the most effective solution.

Here is an example:

<p id="single-spaced">
  This<br> text
  <br> is
  <br> single-spaced.
</p>
<p id="double-spaced" style="line-height: 200%;">
  This<br> text
  <br> is
  <br> double-spaced.
</p>

Utilize the content property to style the content accordingly. Customize the behavior of the content using pseudo elements. The pseudo elements ::before and ::after function properly in Mac Safari 10.0.3.

In this scenario, the element br content serves as the anchor for the br::after content. Styling can be applied to the spacing of the br element while the display and styling of br::after content is controlled separately. This results in a visually appealing design without the need for adding an extra 2px <br> tag.

br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

The line-height property of the br element may not work as expected. Applying negative values to adjust vertical spacing of the br tags can lead to correct spacing but might cause indentation in the display content following each br tag. Pseudo elements play a role in maintaining consistency in the interpretation of multiple <br> tags within the html content.

A trailing br tag impacts the styling of the subsequent html display tag based on the br:after content styling. It is important to note that pseudo elements influence how multiple <br> tags are processed.

br:active { }

Even though the use of br:active does not affect the rendering of a 2px high <br>, it disregards the pseudo element br:after.

br:active { content: ""; display: block; margin: 1.25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }

This solution offers only a partial resolution. Further adjustments to pseudo classes and pseudo elements may provide a more comprehensive CSS solution. For testing purposes, try using different browsers besides Safari.

Explore web development with pseudo classes and pseudo elements

Refer to Mozilla.org for information on global elements like BR

The spacing between lines created by the br tag may vary from the usual line height within a paragraph, and this can be adjusted by changing the font size of the br tag.

For instance: br { font-size: 150%; }

If you want to adjust the height of the <br> tag, one way is to place it within a div element with a specified height. Here's an example:

<div style="height:3px;"><br></div>

Since the 'margin' property is not functioning properly in Chrome, I decided to utilize 'border' as an alternative solution.

br {
  display: block;
  content: "";
  border-bottom: 10px solid transparent; // This method is effective in Chrome and Safari browsers
}
@-moz-document url-prefix() {
  br {
    margin-bottom: 10px; // Since 'border-bottom' doesn't function in Firefox and 'margin-bottom' doesn't work in Chrome or Safari.
  }
}

The BR tag may seem ordinary, but it still has potential for customization. Unlike the usual perception, you can assign attributes to the BR tag without enclosing it in a span element. Simply apply styles like line height directly to the element.

You can achieve this with inline CSS:

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br style="line-height:40vh"/>
break!

Note the use of two line breaks instead of one due to how CSS inline elements function. Unfortunately, the highly anticipated lh unit still lacks cross-browser support as of 2019, necessitating JavaScript for the demo below.

addEventListener("load", function(document, getComputedStyle){"use strict";
  var allShowLineHeights = document.getElementsByClassName("show-lh");
  for (var i=0; i < allShowLineHeights.length; i=i+1|0) {
    allShowLineHeights[i].textContent = getComputedStyle(
      allShowLineHeights[i]
    ).lineHeight;
  }
}.bind(null, document, getComputedStyle), {once: 1, passive: 1});

.show-lh {padding: 0 .25em}
.r {background: #f77}
.g {background: #7f5}
.b {background: #7cf}

This is a small line
<span class="show-lh r"></span><br /><span class="show-lh r"></span>
break. Whereas, this is a BIG line
<span class="show-lh g"></span><br /><span class="show-lh g"></span>
<span class="show-lh b"></span><br style="line-height:40vh"/><span class="show-lh b"></span>
break!

You are free to utilize any CSS selectors such as IDs and classes.

#biglinebreakid {
  line-height: 450%;
  // 9x the normal height of a line break!
}
.biglinebreakclass {
  line-height: 1em;
  // you could even use calc!
}

This is a small line
<br />
break. Whereas, this is a BIG line
<br />
<br id="biglinebreakid" />
break! You can use any CSS selectors you want for things like this line
<br />
<br class="biglinebreakclass" />
break!

Learn more about customizing line heights at W3C docs.

While BR tags are not typically associated with styling possibilities, they can indeed be styled using properties like line-height. However, avoid trying to repurpose them for other uses beyond line breaking, as unexpected results may arise. Even after applying various visual effects, the line break remains visually imperceptible:

#paddedlinebreak {
  display: block;
  width: 6em;
  height: 6em;
  background: orange;
  line-height: calc(6em + 100%);
  outline: 1px solid red;
  border: 1px solid green;
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<br id="paddedlinebreak" />
break.
</div>

A workaround for margins and paddings involves styling a span containing a BR instead.

#paddedlinebreak {
  background: orange;
  line-height: calc(6em + 100%);
  padding: 3em;
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible">
This is a padded line
<span id="paddedlinebreak"><br /></span>
break.
</div>

Observe that the orange blob above represents the span housing the BR element.

To display a line break, use the br tag like this:

<br style="content:''; padding: 10px 0;" />

If you want to adjust the padding value, simply change 10px to your desired number.

Keep in mind that specifying padding will increase the height both above and below the line break.

Adjusting the line height of the <br> tag separately from the rest of the text within a <p> element is possible. One way to do this is by enclosing two <br> tags in a styled <span> element. You can manipulate the line height of these <br> tags independently using the CSS property line-height, as suggested by others.

<p class="normalLineHeight">
  When placed inside a narrow container, this paragraph will display multiple lines with normal line height...
  <span class="customLineHeight"><br><br></span>
  Following a custom break, the text again displays on several lines with normal line height...
</p>

<font size="4"> <font color="#ffe680">something unique here</font><br>

After experimenting with various methods that didn't quite work as expected, I stumbled upon a solution that worked perfectly for me. By replacing the color code with your background color code, you can make the text invisible. Adjusting the font size also allows you to customize the line break according to your preferences. This technique proved effective on Chrome and Safari, the browsers I tested it on. It's a simple yet effective trick.