How to change the height of a ``?

The <br> tag: Not your go-to spacer

Avoid the usual practice of stacking <br> tags to add space. HTML does not support such antics. Opt for semantic and flexible CSS solutions where <br> falls short.

Line-breaking with style

Set a uniform line-height on the parent element to maintain vertical spacing consistency:

.container {
  line-height: 1.5em; /* Eat, sleep, adjust, repeat */
}


Ensure text is wrapped within container for uniform effect.

Styling the rebellious <br>

When you're handcuffed to the HTML structure, target <br> directly:

br {
  display: block;
  margin-top: 15px; /* The sky's the limit; but don't touch the sky */
}


Bailing out on <br>

Switch out <br> with flavored HTML elements when spacing needs aren't minor:

<section class="subparagraph">
  <p>First paragraph.</p>
  <!-- More paragraphs = Less boredom -->
</section>

<style>
  .subparagraph p + p {
    margin-top: 30px; /* Wall Street of paragraphs */
  }
</style>


Pseudo-tastic Spacing

Leverage ::before or ::after CSS pseudo-elements for total freedom of space:

.element::after {
  content: "";
  display: block;
  height: 20px; /* ‘Just the right, right height!’ */
}


Mastering cross-browser consistency

Browser variations can make web designing feel like herding cats. Consistency is your new best friend! JavaScript can be your helping hand for making peace with Internet Explorer and its merry gang.

Spacing on demand with JavaScript

Dynamically apply styles or class names to <br> tags:

// Like Thanos, we can adjust reality...with a snap!
const breaks = document.querySelectorAll('br');
breaks.forEach(br => {
  br.style.display = 'block';
  br.style.marginTop = '10px'; // 'I'm on top of the world'
});


Classes offer a cleaner approach:

// Define once, use after every coffee break
.increased-space {
  display: block;
  margin-top: 10px;
}

// Your friendly neighbourhood JavaScript
const breaks = document.querySelectorAll('br');
breaks.forEach(br => {
  br.classList.add('increased-space');
});


The invisible charm: hr

Swap <br> with an invisible hr element and style up for a spacing spree across browsers:

<!-- Now you see me, now you don't! -->
<hr class="invisible-space"/>

<style>
  .invisible-space {
    border: none;
    height: 20px; /* Height: You'll never see me coming */
    background-color: transparent;
  }
</style>


hr is respected by all browsers; hence, a safe choice for spacing.

Some caveats

• Prioritize accessibility; <br> can confuse screen readers when used for layouts.
• Excessive spacing can be a visual fatigue. Use with caution, like salt in a recipe.