How to Change the Height of a ≪Br≫

How to change the height of a br?

Css:

br {
   display: block;
   margin: 10px 0;
}

The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px;

For Google Chrome, consider setting content:

content: " ";

Other than that, I think you're stuck with a JavaScript solution.

How to change height of a br tag in HTML?

Changing height of <br> is not appreciated. Place <br> element inside a <p> tag and apply line-height to the <p> element

echo '<p style="line-height:30px;margin:0px;"><br></p>

or simply the best try this

echo"<p style='margin:0px;'line-height:20px;>Your content Here</p>";

Change br height using CSS

You can't change the height of the br tag itself, as it's not an element that takes up space in the page. It's just an instruction to create a new line.

You can change the line height using the line-height style. That will change the distance between the text blocks that you have separated by empty lines, but natually also the distance between lines in a text block.

For completeness: Text blocks in HTML is usually done using the p tag around text blocks. That way you can control the line height inside the p tag, and also the spacing between the p tags.

How to change the height of a br?

Css:

br {
   display: block;
   margin: 10px 0;
}

The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px;

For Google Chrome, consider setting content:

content: " ";

Other than that, I think you're stuck with a JavaScript solution.

How to change the height of a br?

Css:

br {
   display: block;
   margin: 10px 0;
}

The solution is probably not cross-browser compatible, but it's something at least. Also consider setting line-height:

line-height:22px;

For Google Chrome, consider setting content:

content: " ";

Other than that, I think you're stuck with a JavaScript solution.

What is the default height of br elements?

A <br> element represents a line break. The height of a line break is determined by the current line height of the portion of the document the break element is in.

The default line height depends on a number of factors, including the browser you're using and the current font family. You can find the exact computed line height for any given element in Chrome by inspecting the element, switching to the computed style tab, and filtering for the line-height property. In most browsers, you should be able to approximate this height with a length value of around 1.2em. For more on em units, see the section on relative length units from MDN.

Does BR tag posseses height?

I found out that the space that we see when we put multiple BR is not actually caused by BR but the P element's line height.

Consider the following markup:

<p>
Hello <br/> Stackoverflow <br/><br/><br/> !
</p>

Output

1. Hello
2. Stackoverflow 
3. 
4.    
5.    !

Line 3 and 4 here are just empty lines. Despite being empty, they still posses line height.

How do I change the size of a br tag to get more spacing between elements?

I would suggest that you keep the <br> tag as is and use margins instead, as the <br> tag is intended to create a single line break between elements. Check this page on MDN.

As a quick fix for an unimportant project, consider adding more <br> tags.

A better option would be to make use of margins in CSS. For example, you could add margin-bottom to the top button:

HTML

<!-- Clear button -->
<button class="mb">Clear</button>
<!-- Equate button -->
<button>=</button>

CSS

/* Add margin to button with the mb class*/
.mb {
    margin-bottom: 20px;
}

This would add a bottom margin of 20px to the top button. You could also add the margin as an inline style if necessary:
<button style="margin-bottom: 20px;">Clear</button>

---

Related Topics